body {color:#555555; overflow-x: hidden;} a{color:#555555}a:active,a:hover {color:#005ca1} .null{width:100%;float:left;line-height:100px;text-align:center;} #obtn{float: left; width: 100%;} .container1{margin:0 auto;padding-left:15px; padding-right:15px;} .maxWidth{margin:0 auto; padding-left:15px; padding-right:15px;} @media (min-width: 768px) { .maxWidth{ width: 768px; } .container1{width: 768px;} } @media (min-width: 992px) { .maxWidth{ width: 992px; } .container1{width: 992px;} } @media (min-width:1230px) { .maxWidth{width:1230px;} .container1{width: 1230px;} } @media (min-width: 1570px) { .maxWidth{width:1570px;} .container1{width: 100%;} } #obtn .head{ float:left; width:100%;z-index:66; padding:0 2.35%; background:#fff; border-bottom: 4px solid #005a9d; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;} #obtn .logo{float:left; margin:20px 0; width:180px; height:45px; line-height:0;} #obtn .languageBox{ float:right; position:relative; padding:20px 0 20px 30px;} #obtn .languageBox h5{ float:left; min-width:70px; text-align:right; color:#333333; font-size:20px; text-transform: uppercase; line-height:45px; padding-left:41px; cursor:pointer;} #obtn .languageBox h5 img{ float:left; /*position:absolute; left:0; top:50%;*/ width:24px; height:24px; margin-top:12.5px;} #obtn .languageBox ul{ display:none; float:left; width:100px; position:absolute; left:0; top:69px; background:#fff; padding:10px 0; z-index: 99; margin-left:30px;} #obtn .languageBox ul li{ float:left; width:100%; color:#333333; font-size:18px; line-height:54px; text-align:center; cursor:pointer; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .languageBox ul li:hover{ color:#0068b7;} #obtn .so{ float:right; position:relative; z-index:6; height: 45px; margin: 20px 0 20px 59px; padding-right: 59px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .so:after{position: absolute; content: ''; width:1px; height:30px; right: 0; top:50%; margin-top: -15px; background: #dddddd;} #obtn .so:before{position: absolute; content: ''; width:0; height:1px; background: #dfdfdf; right: 59px; bottom: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .so .Search{ float:left; width:0; height:35px; background:#C01; background:none; border:0; line-height:22px; padding:7px 0; overflow:hidden; color:#333333; font-size:16px; margin-top: 5px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .so .sear_sub{ float:left; width:24px; height:24px; background:url(_im_g/top2.png) center no-repeat; margin: 11px 0 10px 0;border:0px;} #obtn .so.on .Search, #obtn .so:hover .Search{ width:220px;} #obtn .so.on:before, #obtn .so:hover:before{ width:245px;} #obtn .so ::-webkit-input-placeholder{color:#999;} #obtn .so :-moz-placeholder{color:#999;} #obtn .so ::-moz-placeholder{color:#999;} #obtn .so :-ms-input-placeholder{color:#999;} #obtn .shareBox{float: right; margin:29px 0 28px 50px;} /*start*/ #obtn .shareBox li{float: left; width: 30px; height: 30px; line-height: 0; cursor: pointer; margin-left: 7px;border-radius: 100%;position: relative;z-index: 99;} #obtn .shareBox li img{background: #ababab;border-radius: 100%; } #obtn .shareBox li:hover img{background-color: #0068b7;} #obtn .shareBox li .wy_ewm{display: none; width: 100px;height: 100px;padding: 0px;padding-top: 0px; position: absolute;left: 50%; background: url(images/img4.png)no-repeat center center;background-size: cover; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); top: -moz-calc(100% + 6px); top: -o-calc(100% + 6px); top: -webkit-calc(100% + 6px); top: calc(100% + 6px);} #obtn .shareBox li .wy_ewm .ewm{width: 100%;height: 100%;} #obtn .shareBox li:hover .wy_ewm{display: block;} /*end*/ /*menu*/ #obtn .menu{float: right; } #obtn .menu .nli{ float:left; padding:0 30px; margin:0; position:relative;} #obtn .menu .nli span a{ float:left; position:relative; padding:0; color:#333333; font-size:20px; line-height: 85px; text-transform: uppercase; font-family: Arial;} #obtn .menu .nli span a:hover, #obtn .menu .nli.on span a{color:#005ca1; font-weight:bold} #obtn .menu .sub{display: none; float:left; position:absolute; left:50%; margin-left: -130px; top:85px; width:160px; z-index:99; border-top:4px solid #0068b7;} #obtn .menu .sub .l2{ float:left; width:100%; background:#fff;} #obtn .menu .sub .l2 .la2{ float:left; width:100%; padding:0 0 0 20px; color:#333333; font-size:18px; font-family: Arial; line-height:54px; position:relative;} #obtn .menu .sub .l2 .la2 i{position: absolute; right: 20px; width: 8px; height: 14px; top:50%; margin-top: -7px; line-height: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .menu .sub .l2 .la2 i:last-child{opacity: 0; filter:alpha(opacity=0);} #obtn .menu .sub .l2:hover .la2 i:first-child{opacity: 0; filter:alpha(opacity=0);} #obtn .menu .sub .l2:hover .la2 i:last-child{opacity:1; filter:alpha(opacity=100);} #obtn .menu .sub .l2:first-child{padding-top: 9px;} #obtn .menu .sub .l2:last-child{padding-bottom: 9px;} #obtn .menu .sub .l2:hover .la2{ background:#e8ecef; color:#0068b7;font-weight:bold;} #obtn .menu .ul3{ display:none; float:left; width:180px; position:absolute; left:100%; top:30; background:#e8ecef; padding:9px 5px 9px 20px; } #obtn .menu .ul3 .l3{ float:left; width:100%;} #obtn .menu .ul3 .l3 .la3{ float:left; width:100%; color:#333333; font-size:18px; line-height:54px;font-family: Arial;} #obtn .menu .ul3 .l3 .la3:hover{ color:#0068b7;} #obtn .menu .sub .l2:hover .ul3{ display:block;} /*投资者关系*/ #obtn .bk{width:1320px; float:left;margin:0 125px;} #obtn .ad{width:660px;float:left; padding:30px 30px;} #obtn .ad .title{width:100%;float:left; padding-left:20px;background:rgb(0, 104, 183);font-size: 20px; line-height:58px;color:#fff} #obtn .ad .content{width:100%; float:left;padding:20px;font-size:16px;line-height:30px;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd} @media screen and (max-width:1570px){ .maxWidth{padding-left: 0px;padding-right: 0px;} #obtn .bk{width:1240px; float:left;margin:0 0px;} #obtn .ad{width:620px;float:left; padding:10px;} } @media screen and (max-width:1230px){ } @media screen and (max-width:1700px){ #obtn .menu .nli{padding: 0 20px;} #obtn .menu .nli span a{font-size: 18px;} #obtn .languageBox h5{font-size: 18px;} #obtn .so{margin: 20px 0 20px 40px;padding-right: 40px;} #obtn .so:before{right:40px;} #obtn .so.on .Search, #obtn .so:hover .Search{ width:180px;} #obtn .so.on:before, #obtn .so:hover:before{ width:205px;} #obtn .shareBox {margin: 29px 0 28px 30px;} #obtn .menu .sub .l2 .la2{font-size: 16px;} #obtn .menu .ul3 .l3 .la3{font-size: 16px;} #obtn .languageBox ul li{font-size: 16px;} /*#obtn .bk{width:100%;margin:0} #obtn .ad{width:100%; margin:6px 0;}*/ } @media screen and (max-width:1569px){ #obtn .head{padding: 0;} #obtn .menu .nli{padding: 0 15px;} #obtn .menu .nli span a{font-size: 16px;} #obtn .languageBox{padding: 20px 0 20px 20px;} #obtn .languageBox h5{font-size: 16px; padding-left: 35px} #obtn .languageBox ul li{font-size: 15px; line-height: 50px;} #obtn .so{margin: 20px 0 20px 20px;padding-right: 20px;} #obtn .so .Search{font-size: 14px;} #obtn .so:before{right:20px;} #obtn .so.on .Search, #obtn .so:hover .Search{ width:100px;} #obtn .so.on:before, #obtn .so:hover:before{ width:125px;} #obtn .menu .sub{width: 160px; margin-left: -120px;} #obtn .menu .sub .l2 .la2{font-size: 15px; line-height: 50px;} #obtn .menu .ul3 .l3 .la3{font-size: 15px;line-height: 50px;} #obtn .shareBox{margin: 30px 0 30px 20px;} #obtn .shareBox li{width: 25px; height: 25px;} } @media screen and (max-width:1229px){ #obtn .logo{width: 140px; height: 35px; margin: 15px 0;} #obtn .menu .nli{padding: 0 10px;} #obtn .menu .nli span a{font-size: 14px;line-height:65px;} #obtn .menu .sub{top:65px; width:160px;} #obtn .menu .sub .l2 .la2{padding: 0 0 0 15px; line-height: 45px;} #obtn .menu .sub .l2 .la2 i{right: 15px;} #obtn .menu .ul3{width: 240px;} #obtn .menu .ul3 .l3 .la3{line-height: 45px;} #obtn .languageBox{padding: 10px 0 10px 20px;} #obtn .languageBox h5{font-size: 14px; padding-left: 30px;} #obtn .languageBox h5 img{width: 20px; height: 20px; /*margin-top: -10px;*/} #obtn .so{height: 41px;margin: 12px 0 12px 15px;padding-right: 15px;} #obtn .so .sear_sub{width: 20px; height: 20px;background: url(_im_g/top2.png) center no-repeat; background-size: cover; position: relative; z-index: 3;} #obtn .so:before{right:15px;} #obtn .so:after{height: 26px;margin-top: -13px;} #obtn .so .Search{position: absolute; right:5px; z-index: 1;} #obtn .so.on .Search, #obtn .so:hover .Search{ width:160px; background: #f5f5f5; text-indent: 12px;} #obtn .so.on:before, #obtn .so:hover:before{ width:0;} #obtn .shareBox{margin: 22px 0 22px 15px;} #obtn .shareBox li{margin-left: 5px; width: 21px; height: 21px;} #obtn .languageBox ul{top:59px;padding:5px 0;} #obtn .languageBox ul li{line-height: 40px;} } @media screen and (max-width:991px ){ /*20201203start修改*/ #obtn .head{position: fixed; z-index: 99;} /*20201203end修改*/ #obtn .logo{ margin:15px 0; width:122px; height:30px;} #obtn .menu{ display:none;} #obtn .languageBox{padding:15px 0 15px 20px;} #obtn .languageBox h5{line-height: 30px;} #obtn .so{ display:none;} #obtn .so:after{display:none;} #obtn .soPH{ display:block; position:relative; width:100%; margin:15px 0;} #obtn .soPH .Search{ width:100%; margin-right:0; background: #0068b7; background:rgba(0,104,183,0.8); padding:7px 40px 7px 0; text-indent: 15px; color:#fff; right: 0;} #obtn .soPH.on .Search, #obtn .soPH:hover .Search{ width:100%;background: #0068b7;text-indent: 15px;} #obtn .soPH .sear_sub{ right:10px; position:absolute; background: url("_im_g/top2_1.png") no-repeat; background-size: cover; margin: 0; top:50%; margin-top: -10px;} #obtn .shareBox{margin:10px 0; width: 100%; display: block; text-align: center;} #obtn .shareBox li{width: 25px; height: 25px; float: none; margin: 0 5px; display: inline-block;} #obtn .so ::-webkit-input-placeholder{color:#fff;} #obtn .so :-moz-placeholder{color:#fff;} #obtn .so ::-moz-placeholder{color:#fff;} #obtn .so :-ms-input-placeholder{color:#fff;} #obtn .pcShare{display: none} #obtn .languageBox ul{top:49px;} } /*鎵嬫満瀵艰埅鎸夐挳*/ #obtn .menuph{ display:none; float:right; width:28px; height:22px; cursor: pointer; text-align: center; margin:20px 0 18px 20px;} #obtn .menuph .point { float:left; width: 28px; height: 22px; position: relative;} #obtn .menuph .point:hover .navbtn, #obtn .menuph .point:hover .navbtn::after, #obtn .menuph .point:hover .navbtn::before { width: 28px; } #obtn .menuph .navbtn { position: absolute; top: 10px; right: 0; display: inline-block; width: 21px; height: 2px; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; background: #0068b7; } #obtn .menuph .navbtn::after, #obtn .menuph .navbtn::before { position: absolute; right: 0; display: inline-block; width: 28px; height: 2px; content: ''; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; background: #0068b7; } #obtn .menuph .navbtn::after { top: -11px; } #obtn .menuph .navbtn::before { top: 10px; } #obtn .menuph .point.active .navbtn{ background: transparent; } #obtn .menuph .point.active .navbtn::after{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; } #obtn .menuph .point.active .navbtn::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 0px; } @media screen and (max-width:991px ){ #obtn .menuph{ display:block;} #obtn .languageBox h5 img{margin-top: 3px;} } /*鎵嬫満瀵艰埅*/ #obtn .xialaph{ position:fixed; left:0; top:0; float:left; width: 100%; height:100%; overflow:scroll; padding:62px 0 100px 0; display: none; z-index:60; background:#fff; background:rgba(255,255,255,0.9);} #obtn .xialaph .ul2, #obtn .xialaph .ul3{display: none;} #obtn .xialaph h4{ float:left; width:100%; position:relative;} #obtn .xialaph h4 a{ float:left; width:66%; color: #333; font-size:16px; line-height:50px; position:relative;text-transform: uppercase; font-family: Arial; } #obtn .xialaph li h4 a i{ float:left; position:absolute; left:0; top:50%; margin-obtn:-10px; width:20px; height:20px;} #obtn .xialaph li:last-child h4::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; opacity: 0.3; } #obtn .xialaph h4::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #000; opacity: 0.1; } #obtn .xialaph h5 a{ float:left; width:75%; color: #555; font-size:14px; line-height:40px; padding:0; font-family: Arial;} #obtn .xialaph h5{ float:left; width:100%;position: relative; } #obtn .xialaph h5::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000; opacity: 0.1; } #obtn .xialaph li:last-child h5::after{ display: none; } #obtn .xialaph h4 img{ width: 15px; height: 8px; float: right; margin-top: 21px; cursor: pointer; } #obtn .xialaph h5 img{ width: 11px; height: 6px; float: right; margin-top: 17px; margin-right: 10px; cursor: pointer; } #obtn .xialaph h4.active img.img_s, #obtn .xialaph h5.active img.img_s{ display: none; } #obtn .xialaph h4.active img.img_d, #obtn .xialaph h5.active img.img_d{ display: block; } #obtn .xialaph .ul2{ float:left; width:100%; padding:0 10px;} #obtn .xialaph .ul3{ float:left; width:100%; padding:5px 10px;border-bottom: 1px solid rgba(0,0,0,0.1);} #obtn .xialaph .ul3 li{float: left; width:100%; font-size: 14px; line-height: 35px;} #obtn .xialaph .ul3 li a{float: left; width: 100%; font-family: Arial;} #obtn .xialaph .img_d{ display: none; } /*鎵嬫満搴曢儴瀵艰埅*/ #obtn .pf_down{width:100%; float:left; position:fixed; left:0; bottom:0; height:50px; background:#005ca1; z-index:60; box-shadow:0 -4px 7px rgba(0,0,0,0.15);} #obtn .pf_down li{ width:33.33%; float:left; text-align:center; padding:7px 0 5px 0; border-right:1px solid rgba(255,255,255, 0.2);} #obtn .pf_down li:last-child{ border:none;} #obtn .pf_down li .ico{ width:100%; float:left; height:20px;} #obtn .pf_down li .ico img{ width:20px; height:20px;} #obtn .pf_down li .name{ width:100%; float:left; margin-top:4px; font-size:12px; color:#fff; line-height:14px;} /*鍙充晶婕傛诞*/ #obtn .pf_right{ float:right; width:52px; position:fixed; right:10px; top:50%; margin-top:-75px; z-index:66; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;} #obtn .pf_right ul{ float:left; width:100%;} #obtn .pf_right li{ float:left; width:100%; position:relative; height:52px; z-index:6; margin-top: 20px; } #obtn .pf_right li:last-child{ border-bottom:none;} #obtn .pf_right li .ico{ float:left; width:52px; line-height:0; text-align:center; position:relative; z-index:6;background: #2d2d2d; background: rgba(45,45,45,0.4); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;} #obtn .pf_right li:hover .ico{ background:#0068b7; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; } /*banner*/ #obtn .slide_banner{ float:left; width:100%; margin:0; position:relative; overflow:hidden; text-align:center;} #obtn .slide_banner .slick-slide{ width:100%; padding:0; position:relative; line-height:0;} #obtn .slide_banner img{ width:100%;} #obtn .slide_banner .slick-dots{ height:25px; bottom:57px; } #obtn .slide_banner .slick-dots li{ width:25px; height:25px; margin:0 7px; padding:8px;text-align:center; text-indent:-9999px; overflow:hidden; vertical-align:top; position: relative; } #obtn .slide_banner .slick-dots li button{ width: 9px; height: 9px;border:1px solid #fff; padding: 0; border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; } #obtn .slide_banner .slick-dots li button:after{position: absolute; content: ''; width: 25px; height: 25px; left:0; top:0; border:1px solid #fff; opacity: 0; filter:alpha(opacity=0); border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px; } #obtn .slide_banner .slick-dots li.slick-active button{background:#fff;} #obtn .slide_banner .slick-dots li.slick-active button:after{opacity: 1; filter:alpha(opacity=100);} #obtn .slide_banner .slick-prev, #obtn .slide_banner .slick-next{width: 68px; height: 68px; left: 90px; background: #000; background: rgba(0,0,0,0.2); z-index: 3; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #obtn .slide_banner .slick-next{left: auto; right: 90px;} #obtn .slide_banner .slick-prev:after, #obtn .slide_banner .slick-next:after{position: absolute; content: ''; width:68px; height: 68px; background: url("_im_g/prev.png") no-repeat; background-size: cover; left: 0; top:0; z-index: 3; } #obtn .slide_banner .slick-next:after{background:url("_im_g/next.png") no-repeat; background-size: cover;} #obtn .slide_banner .slick-prev:hover, #obtn .slide_banner .slick-next:hover{background:#000;background: rgba(0,0,0,0.5);} @media screen and (max-width:991px){ #obtn .slide_banner .slick-dots{height: 21px; bottom:20px;} #obtn .slide_banner .slick-dots li{margin: 0 5px; width: 21px; height: 21px;padding: 6px;} #obtn .slide_banner .slick-dots li button:after{width: 21px; height: 21px;} } @media screen and (max-width:767px){ #obtn .slide_banner .slick-prev, #obtn .slide_banner .slick-next{width:45px; height:45px; left: 15px;} #obtn .slide_banner .slick-next{left: auto; right:15px;} #obtn .slide_banner .slick-prev:after, #obtn .slide_banner .slick-next:after{position: absolute; content: ''; width:45px; height:45px; background: url("_im_g/prev.png") no-repeat; background-size: cover; left: 0; top:0; z-index: 3; } #obtn .slide_banner .slick-next:after{background:url("_im_g/next.png") no-repeat; background-size: cover;} } #obtn .homeAboutBox{float: left; width: 100%; padding:123px 2.35% 59px 2.35%; position: relative;} #obtn .homeAboutBox:after{position: absolute;content: ''; width: 1px; height: 45px; top: -45px; left: 50%; /*background:#fff;opacity: 0.5;filter:alpha(opacity=50);*/} #obtn .homeAboutBox:before{position: absolute;content: ''; width: 1px; height: 45px; top:0; left: 50%; /*background:#005ca1;*/} #obtn .homeTit{float: left; width: 100%; line-height: 80px;color:#333333; font-size: 48px; font-weight: bold; font-family: Arial; text-transform: uppercase; text-align: center; padding-bottom: 19px; position: relative;} #obtn .homeTit:after{position: absolute; content:''; width: 65px;height: 1px; /*background: #1d79be;*/ left: 50%;margin-left: -32.5px; bottom: 0;} @media screen and (max-width:1569px) { #obtn .homeAboutBox{padding:80px 0 40px 0;} #obtn .homeAboutBox:after{ height: 35px; top: -35px; } #obtn .homeAboutBox:before{ height: 35px;} } @media screen and (max-width:1229px) { #obtn .homeAboutBox{padding:70px 0 35px 0;} #obtn .homeAboutBox:after{ height: 30px; top: -30px; } #obtn .homeAboutBox:before{ height: 30px;} #obtn .homeTit{font-size:42px; line-height: 60px;padding-bottom: 10px;} } @media screen and (max-width:991px) { #obtn .homeAboutBox{padding:60px 0 28px 0;} #obtn .homeAboutBox:after, #obtn .homeAboutBox:before{display: none;} #obtn .homeTit{font-size:38px; line-height: 50px;} } @media screen and (max-width:767px) { #obtn .homeAboutBox{padding:35px 0 20px 0;} #obtn .homeTit{font-size:30px; line-height: 40px;} } #obtn .homeAboutLeft{float: left; width: 66.666%; background: #f6f6f6; margin-top: 60px;} #obtn .homeAboutLeft .text{float: left; width: 50%; padding: 50px 60px 60px 60px; height: 400px;} #obtn .homeAboutLeft .text .p1{float: left; width: 100%; color:#333333; font-size: 18px; font-family: Arial; line-height: 36px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:8; overflow: hidden; } #obtn .homeAboutLeft .text .more{float: right; width: 100%; margin-top: 15px;} #obtn .homeAboutLeft .text .more a{float: right; width: 140px; height: 40px; border:1px solid #dedede; font-family: Arial; text-transform: uppercase; color:#888888; font-size: 16px; text-align: center; line-height:40px;} #obtn .homeAboutLeft .text .more a:hover{border:1px solid #005ca1; background: #005ca1; color:#fff;} #obtn .homeAboutLeft .video{float: left;width: 50%;position: relative} #obtn .homeAboutLeft .video video{float: left;width: auto height: 400px;; cursor: pointer;object-fit:fill} #obtn .homeAboutLeft .hValueButton{position: absolute; width:100%; height:100%; background:#000; background: rgba(0,0,0,0.2);} #obtn .homeAboutLeft .hValueButton span{position: absolute; width: 86px; height: 86px; left: 50%; margin-left: -43px; top:50%; margin-top: -43px;} #obtn .homeAboutRight{float: right; width: 31.2%; border:3px solid #e8e8e8; margin-top: 60px; height: 400px; padding: 45px 59px 22px 59px; position: relative} #obtn .homeAboutRight:after{position: absolute; content: ''; width: 1px; height: 100%; border-left: 1px dotted #d9d9d9; top:0; left:131px;} #obtn .homeAboutRight dl{float: left; width: 100%; margin-top: 5px;} #obtn .homeAboutRight dd{float: left; width: 100%; padding-left: 105px; position: relative;} #obtn .homeAboutRight dd:after{position: absolute; content: ''; width: 11px; height: 11px; background: #d9d9d9; left:67px; top:11px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #obtn .homeAboutRight dd span{position: absolute; left: 0; width: 40px; height: 40px; top:-5px;} #obtn .homeAboutRight dd em{float: left; width: 100%; color:#333333; font-size: 18px; line-height: 30px; height: 60px; overflow: hidden;} @media screen and (max-width:1569px) { #obtn .homeAboutLeft{margin-top:45px;} #obtn .homeAboutLeft .text{padding: 30px 35px 40px 35px; height: 310px;} #obtn .homeAboutLeft .text .p1{font-size: 16px; line-height: 30px;} #obtn .homeAboutLeft .text .more{margin-top: 20px;} #obtn .homeAboutLeft .text .more a{font-size: 14px;} #obtn .homeAboutLeft .video video{height: 310px;} #obtn .homeAboutLeft .hValueButton span{width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;} #obtn .homeAboutRight{margin-top: 45px;padding:20px 25px 20px 25px; height: 310px;} #obtn .homeAboutRight:after{left:70px;} #obtn .homeAboutRight dd{padding-left: 70px;} #obtn .homeAboutRight dd span{width: 30px; height: 30px; top:0;} #obtn .homeAboutRight dd:after{left:41px; width: 9px; height: 9px; top:8px;} #obtn .homeAboutRight dd em{font-size: 16px; line-height: 26px; height:52px;} } @media screen and (max-width:1229px) { #obtn .homeAboutLeft{width: 100%; margin-top: 40px;} #obtn .homeAboutRight{width: 100%; margin-top: 20px;height: auto;} #obtn .homeAboutRight dl{width: 50%;} #obtn .homeAboutRight:before{position: absolute;content: '';width: 1px;height: 100%;border-left: 1px dotted #d9d9d9;top: 0;right:432px;} } @media screen and (max-width:991px) { #obtn .homeAboutRight:before{right:320px;} } @media screen and (max-width:767px) { #obtn .homeAboutLeft{margin-top:25px;} #obtn .homeAboutLeft .text{width: 100%;padding: 20px 20px 25px 20px; height: auto;} #obtn .homeAboutLeft .text .p1{font-size: 14px; line-height: 26px;} #obtn .homeAboutLeft .video{width: 100%;} #obtn .homeAboutLeft .video video{height: auto;} #obtn .homeAboutRight:before{display: none;} #obtn .homeAboutRight dl{width: 100%;} #obtn .homeAboutRight dd em{font-size: 14px;} } #obtn .homeProductBox{float: left; width: 100%; padding:59px 2.35% 120px 2.35%; background: #f1f3f4; background: -moz-linear-gradient(top, #fff 0%, #f1f3f4 100%) ; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f1f3f4)) ; background: -webkit-linear-gradient(top, #fff 0%,#f1f3f4 100%) ; background: -o-linear-gradient(top, #fff 0%,#f1f3f4 100%) ; background: -ms-linear-gradient(top, #fff 0%,#f1f3f4 100%) ; } #obtn .homeProDisList{float: left; width: 100%; margin-top: 60px;} #obtn .homeProDisList ul{margin: 0 -1.5625%;} #obtn .homeProDisList li{float: left; width: 33.3333%; padding: 0 1.5625%;} #obtn .homeProDisList li a{float: left; width: 100%; line-height: 0; background: #fff;position: relative; box-shadow: 0 0 5px rgba(0,0,0,0.03); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.03); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.03); } #obtn .homeProDisList li a .img{float: left; width: 100%; line-height: 0; overflow: hidden;} #obtn .homeProDisList li a .img img{ -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } #obtn .homeProDisList li a .text{float: left; position: absolute; width: 100%; text-align: center; color:#333333; font-size: 20px; line-height: 50px; padding: 0 10px; left: 0; bottom: 30px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } #obtn .homeProDisList li a:hover{ box-shadow: 0 0 25px rgba(0,0,0,0.06); -moz-box-shadow: 0 0 25px rgba(0,0,0,0.06); -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.06); } #obtn .homeProDisList li a:hover .text{color:#0068b7} #obtn .homeProDisList li a:hover .img img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } @media screen and (max-width:1569px) { #obtn .homeProductBox{padding: 40px 0 90px 0} #obtn .homeProDisList{margin-top: 45px;} #obtn .homeProDisList li a .text{font-size: 18px; bottom: 20px;} } @media screen and (max-width:1229px) { #obtn .homeProductBox{padding: 35px 0 70px 0} #obtn .homeProDisList{margin-top: 40px;} #obtn .homeProDisList li a .text{font-size: 16px; bottom: 15px;} } @media screen and (max-width:991px) { #obtn .homeProductBox{padding:28px 0 60px 0} #obtn .homeProDisList li a .text{bottom: 10px;} } @media screen and (max-width:767px) { #obtn .homeProductBox{padding:20px 0 40px 0} #obtn .homeProDisList{margin-top: 15px;} #obtn .homeProDisList li{width: 100%; margin-top: 15px;} } #obtn .homeNewsBox{float: left; width: 100%; margin: 100px 0;} #obtn .homeNewsList{float: left; width: 100%; padding: 0 15px; margin-top:40px;} #obtn .homeNewsList ul{float: left; width: 100%;} #obtn .homeNewsList li{float: left; width: 33.333%;} #obtn .homeNewsList li a{float: left; width: 100%; background: #fff; padding: 30px 30px 0 30px;} #obtn .homeNewsList li a:hover{ position: relative; z-index: 2; box-shadow: 0 0 25px rgba(0,0,0,0.06); -moz-box-shadow: 0 0 25px rgba(0,0,0,0.06); -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.06); } #obtn .homeNewsList li a .tImg{float:left; width:100%; line-height: 0; overflow: hidden;} #obtn .homeNewsList li a .tImg img{ -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } #obtn .homeNewsList li a .text{float: left; width: 100%; color:#333333; font-size: 20px; line-height: 28px; height: 84px; font-family: Arial; margin-top: 25px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #obtn .homeNewsList li a .dMore{float: left; width: 100%; margin-top: 35px; padding-bottom: 32px; border-bottom: 1px solid #e8e8e8; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } #obtn .homeNewsList li a .dMore .left{float: left; color:#888888; font-size: 16px; line-height: 40px; font-weight: bold; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; } #obtn .homeNewsList li a .dMore .time{float: right; color:#888888; font-size: 16px; line-height: 40px; font-weight: bold;} #obtn .homeNewsList li a .dMore .time span{font-size: 30px;color:#333333;} #obtn .homeNewsList li a:hover .tImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .homeNewsList li a:hover .dMore{border-bottom: 0;} #obtn .homeNewsList li a:hover .dMore .left{color:#005ca1} @media screen and (max-width:1569px) { #obtn .homeNewsBox{ margin: 80px 0;} #obtn .homeNewsList{ padding:0; margin-top:40px;} #obtn .homeNewsList li a{ padding: 20px 20px 0 20px;} #obtn .homeNewsList li a .text{font-size: 18px;} #obtn .homeNewsList li a .dMore{margin-top:25px; padding-bottom: 22px;} } @media screen and (max-width:1229px) { #obtn .homeNewsBox{ margin: 60px 0;} #obtn .homeNewsList{ padding:0; margin-top:30px;} #obtn .homeNewsList li a{ padding: 15px 15px 0 15px;} #obtn .homeNewsList li a .text{margin-top:15px; font-size: 16px;} #obtn .homeNewsList li a .dMore{margin-top:20px; padding-bottom:15px;} #obtn .homeNewsList li a .dMore .left{font-size: 15px; line-height: 35px;} #obtn .homeNewsList li a .dMore .time{font-size: 15px; line-height: 35px;} #obtn .homeNewsList li a .dMore .time span{font-size: 24px;} } @media screen and (max-width:767px) { #obtn .homeNewsBox{margin:40px 0;} #obtn .homeNewsList{margin-top: 15px;} #obtn .homeNewsList li{margin-top: 15px; width: 100%;} #obtn .homeNewsList li a{ padding: 12px 12px 0 12px; box-shadow: 0 0 15px rgba(0,0,0,0.06); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.06); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.06); } #obtn .homeNewsList li a .text{margin-top:10px; font-size: 15px;} #obtn .homeNewsList li a .dMore{border-bottom: 0;} } #obtn .homeNewsList .newsMore{float: left; width: 100%; display: block; text-align: center; margin-top: 60px;} #obtn .homeNewsList .newsMore a{display: inline-block; width: 56px; height: 56px; background: #e1e1e1; border-radius: 50px;-moz-border-radius: 50px;-webkit-border-radius: 50px;position: relative; } #obtn .homeNewsList .newsMore a:hover{background: #005ca1;} #obtn .homeNewsList .newsMore a:after{position: absolute; content:''; width: 24px; height: 2px; background: #fff; left: 50%; margin-left: -12px; top:50%; margin-top: -1px;} #obtn .homeNewsList .newsMore a:before{position: absolute; content:''; width: 2px; height: 24px; background: #fff;left: 50%; margin-left: -1px; top:50%; margin-top: -12px;} @media screen and (max-width:1229px) { #obtn .homeNewsList .newsMore{margin-top: 40px;} #obtn .homeNewsList .newsMore a{width: 50px; height: 50px;} } @media screen and (max-width:767px) { #obtn .homeNewsList .newsMore{margin-top: 30px;} } #obtn .downBox{float:left; width: 100%; background: #22272b; background:-webkit-linear-gradient(left,#22272b,#1e2328); background:-o-linear-gradient(right,#22272b,#1e2328); background:-moz-linear-gradient(right,#22272b,#1e2328); background:linear-gradient(to right,#22272b,#1e2328); } #obtn .downBox .footNav{float: left; width: 100%; margin:30px 0 20px 0;} #obtn .downBox .footNav .ul1{float: left; width: 20%;} #obtn .downBox .footNav .footTit{float:left; width:100%; color:#ffffff; font-size:20px; line-height:32px;font-weight: bold; font-family: Arial;} #obtn .downBox .footNav .box{ float:left; width:100%; margin-top:17px;} #obtn .downBox .footNav .box li{ float:left; width:100%;} #obtn .downBox .footNav .box li a{ float:left; width:100%; color:#fff; color:rgba(255,255,255,0.5); font-size:16px; line-height:32px;font-family: Arial;} #obtn .downBox .footNav .box li a:hover{ color:#fff;} /*20201203start*/ #obtn .downBox .footContact .title{width: 100%;font-size: 0;margin-bottom: 15px;} #obtn .downBox .footContact .title .icon{width: 18px;height: 18px;display: inline-block;vertical-align: middle;} #obtn .downBox .footContact .title .words{font-size: 16px;color: #ffffff;display: inline-block;vertical-align: middle;margin-left: 6px;} #obtn .downBox .footContact .phone{font-size: 26px;color: #ffffff;font-weight: bold;margin-bottom: 22px;} #obtn .downBox .footContact .ewmbox{width: 100%;font-size: 0;} #obtn .downBox .footContact .ewmbox .ewms{width: 117px;height: 117px;padding: 4px;display: inline-block;vertical-align: bottom;background-color: #fff;margin-right: 12px;} #obtn .downBox .footContact .ewmbox .ewm{width: 100%;height: 100%;} #obtn .downBox .footContact .ewmbox .words{font-size: 14px;color: #ffffff;display: inline-block;vertical-align: middle;} /*20201203end*/ @media screen and (max-width:1569px) { #obtn .downBox .footNav .ul1{float: left; width: 18%;} #obtn .downBox .ul1.footContact{width: 28%;} #obtn .downBox .footNav .footTit{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .downBox .footNav{margin:50px 0 45px 0;} #obtn .downBox .footNav .footTit{font-size: 16px; line-height: 30px;} #obtn .downBox .footNav .box{margin-top: 10px;} #obtn .downBox .footNav .box li a{font-size: 14px; line-height: 30px;} #obtn .downBox .footContact .box p{font-size: 14px; line-height: 30px;} } @media screen and (max-width:991px) { #obtn .downBox .footNav{margin:35px 0 30px 0} #obtn .downBox .footNav .ul1{display: none;} #obtn .downBox .ul1.footContact{display: block; width:100%;} /*20201203start*/ #obtn .downBox .footContact .title{text-align: center;margin-bottom: 8px;} #obtn .downBox .footContact .title .icon{width: 16px;height: 16px;} #obtn .downBox .footContact .title .words{font-size: 14px;margin-left: 4px;} #obtn .downBox .footContact .phone{font-size: 20px;margin-bottom: 12px;text-align: center;} #obtn .downBox .footContact .ewmbox .ewms{width: 100px;height: 100px;margin-right: 6px;display: block;margin: 0 auto;} #obtn .downBox .footContact .ewmbox .words{font-size: 12px;display: block;text-align: center;margin-top: 8px;} /*20201203end*/ } #obtn .copyright{float: left; width: 100%;background: #191d20; line-height: 26px; padding: 12px 0; text-align: center; color:#ffffff; color:rgba(255,255,255,0.5); font-size: 14px; font-family: Arial; text-align: center;} @media screen and (max-width:767px){ #obtn .downBox{margin-bottom: 50px;} #obtn .copyright{font-size: 12px;} } /*1about*/ #obtn .iBanner{float: left; width: 100%; line-height: 0; position: relative} #obtn .iBanner .currentBox{position: absolute;width: 100%; left: 0; bottom: 150px;} #obtn .iBanner .currentBox .tit{float: left; width: 100%; color:#fff; font-size: 58px; font-weight: bold; font-family: Arial; line-height: 80px;} #obtn .iBanner .currentBox .text{float: left; width: 100%; color:#fff; font-size: 30px;line-height: 40px; margin-top: 20px; font-family: Arial; font-weight: bold;} @media screen and (max-width:1569px) { #obtn .iBanner .currentBox{bottom:150px;} #obtn .iBanner .currentBox .tit{ font-size: 50px;line-height: 30px;} #obtn .iBanner .currentBox .text{font-size: 25px;line-height: 30px;} } @media screen and (max-width:991px) { #obtn .iBanner .currentBox{bottom:60px;} #obtn .iBanner .currentBox .tit{ font-size:30px;line-height: 40px;} #obtn .iBanner .currentBox .text{font-size: 18px;line-height: 20px; margin-top: 10px;} } @media screen and (max-width:767px) { #obtn .iBanner .currentBox{bottom:38px;} #obtn .iBanner .currentBox .tit{ font-size:30px;line-height: 25px;} #obtn .iBanner .currentBox .text{font-size: 16px;line-height: 10px; margin-top: 10px;} } /*浜岀骇瀵艰埅*/ /*宸﹁竟*/ #obtn .slideBox{float:left; width: 100%; background: #f4f4f5} #obtn .slideBox .pz_SideLayer{float:left; } #obtn .slideBox .pz_SideLayer .l1{float:left; margin-right: 50px; position: relative} #obtn .slideBox .pz_SideLayer .l1:after{position: absolute; content: ''; width: 1px; height: 22px; background: #dbdbdb; right: -25px; top:50%; margin-top: -11px;} #obtn .slideBox .pz_SideLayer .l1:last-child:after{width: 0;} #obtn .slideBox .pz_SideLayer .l1:last-child{margin-right: 0;} #obtn .slideBox .pz_SideLayer .l1 a{ float:left; height:85px; line-height:85px; color:#333333; font-size:22px; padding:0 2px; position:relative; font-family: Arial;} #obtn .slideBox .pz_SideLayer .l1 a:after{ float:left; width:0; height:4px; content:''; position:absolute; left:50%; bottom:-1px; background:#0068b7; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%);} #obtn .slideBox .pz_SideLayer .l1.on a, #obtn .slideBox .pz_SideLayer .l1:hover a{ color:#0068b7;font-weight:bold;} #obtn .slideBox .pz_SideLayer .l1.on a:after, #obtn .slideBox .pz_SideLayer .l1:hover a:after{ width:100%;} @media screen and (max-width:1700px){ #obtn .slideBox .pz_SideLayer .l1 a{font-size: 18px;} } @media screen and (max-width:1569px){ #obtn .slideBox .pz_SideLayer .l1{margin-right: 60px;} #obtn .slideBox .pz_SideLayer .l1:last-child{margin-right: 0;} #obtn .slideBox .pz_SideLayer .l1:after{right: -30px;} #obtn .slideBox .pz_SideLayer .l1 a{font-size: 16px;height:70px;line-height:70px;} #obtn .slideBox .pz_SideLayer .l1 a:after{height: 3px;} } @media screen and (max-width:1230px){ #obtn .slideBox .pz_SideLayer .l1 a{font-size:14px;height:60px;line-height:60px;} } @media screen and (max-width:991px){ #obtn .slideBox .pz_SideLayer .l1{margin-right: 40px;} #obtn .slideBox .pz_SideLayer .l1:after{right: -20px;} #obtn .slideBox .pz_SideLayer .l1 a{ height:50px; line-height:50px; } } @media screen and (max-width:767px){ #obtn .slideBox{white-space:nowrap; height:46px;} #obtn .slideBox .maxWidth{ overflow-x:scroll; white-space:nowrap;} #obtn .slideBox .pz_SideLayer{ overflow-x:scroll; white-space:nowrap;} #obtn .slideBox .pz_SideLayer .l1{ float:none; display:inline-block; white-space:nowrap;} #obtn .slideBox .pz_SideLayer .l1:last-child{margin-right: 15px;} } #obtn .pageAboutInfo{float: left; width: 100%; margin: 80px 0 140px 0;} #obtn .pageAboutInfo .leftText{float: left; width: 49%; color:#333333; font-size: 20px; line-height: 40px; font-family: Arial;} #obtn .pageAboutInfo .leftText .aboutTit{float: left; color:#333333; font-size:60px; line-height: 50px; font-family: Arial; font-weight: bold; margin-top: 28px;} #obtn .pageAboutInfo .leftText .p1{float: left; width: 100%; margin-top: 49px;} #obtn .pageAboutInfo .rightVideo{float: right; width: 40%; position: relative} #obtn .pageAboutInfo .rightVideo video{float: left; width: 100%; height: 410px;object-fit:fill} #obtn .pageAboutInfo .rightVideo .hValueButton{position: absolute; width: 100%; height: 100%; left: 0; top:0; background: #000; background:rgba(0,0,0,0.2);} #obtn .pageAboutInfo .rightVideo .hValueButton span{position: absolute; width: 86px; height: 86px;left: 50%; margin-left: -43px; top:50%; margin-top: -43px;} @media screen and (max-width:1569px) { #obtn .pageAboutInfo{ margin: 120px 0 110px 0;} #obtn .pageAboutInfo .leftText{ font-size:17px; line-height:32px;} #obtn .pageAboutInfo .leftText .aboutTit{font-size:45px; line-height: 40px; margin-top: 10px;} #obtn .pageAboutInfo .leftText .p1{ margin-top: 40px;} #obtn .pageAboutInfo .rightVideo .hValueButton span{width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;} } @media screen and (max-width:1229px) { #obtn .pageAboutInfo{ margin: 90px 0 80px 0;} #obtn .pageAboutInfo .leftText{width: 52%; font-size: 16px; line-height: 28px;} #obtn .pageAboutInfo .leftText .p1{margin-top: 30px;} } @media screen and (max-width:991px) { #obtn .pageAboutInfo{ margin: 50px 0 60px 0;} #obtn .pageAboutInfo .leftText{width: 100%;} #obtn .pageAboutInfo .rightVideo{width: 100%; margin-top: 20px;} #obtn .pageAboutInfo .leftText .aboutTit{font-size: 36px; line-height: 30px; margin-top: 0;} #obtn .pageAboutInfo .leftText .p1{font-size: 15px; line-height: 24px; margin-top: 20px;} #obtn .pageAboutInfo .rightVideo video{float: left; width:100%; height: auto;} } @media screen and (max-width:767px) { #obtn .pageAboutInfo{ margin:40px 0;} } #obtn .pageGreyBg{float: left; width: 100%; background: #f4f4f5;} #obtn .pageAboutMap{float: left; width: 100%; margin: 10px 0 10px 0;} #obtn .pageAboutMap .topText{float: left; width: 100%; color:#333333; font-size: 20px; line-height: 40px; font-family: Arial;} #obtn .pageAboutMap .downImg{float: left; width: 100%; margin-top: 15px; line-height: 0;} @media screen and (max-width:1569px) { #obtn .pageAboutMap{ margin: 10px 0 10px 0;} #obtn .pageAboutMap .topText{font-size: 17px; line-height:32px;} } @media screen and (max-width:1229px) { #obtn .pageAboutMap{ margin: 10px 0 10px 0;} #obtn .pageAboutMap .topText{font-size: 16px; line-height:28px;} } @media screen and (max-width:991px) { #obtn .pageAboutMap{ margin: 10px 0;} #obtn .pageAboutMap .topText{font-size: 15px; line-height:24px;} #obtn .pageAboutMap .downImg{margin-top: 35px;} } @media screen and (max-width:767px) { #obtn .pageAboutMap{ margin:10px 0;} #obtn .pageAboutMap .downImg{margin-top: 25px;} } #obtn .pageAboutWords{float: left; width: 100%; margin: 140px 0;} #obtn .pageAboutWords .pageNumBox{float: left; width:49%; background: #0068b7; height: 402px; position: relative} #obtn .pageAboutWords .pageNumBox:after{position: absolute; content: ''; width: 100%; height: 100%; background: #0068b7; left: -50%;} #obtn .pageAboutWords .pageNumBox ul{float: left; width: 100%; margin-top: 120px; position: relative; z-index: 3;} #obtn .pageAboutWords .pageNumBox li{float: left; margin-right: 70px; padding-bottom: 20px; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.3);} #obtn .pageAboutWords .pageNumBox li:last-child{margin-right: 0;} #obtn .pageAboutWords .pageNumBox li span{display: block; font-size: 68px; color:#ffffff; font-family: Arial; line-height: 60px;} #obtn .pageAboutWords .pageNumBox li span i{ display:inline-block;font-size: 24px; line-height: 30px;} #obtn .pageAboutWords .pageNumBox li em{display: block; font-size: 18px;line-height: 32px; margin-top: 11px; font-family: Arial; color:#fff; height: 64px;} #obtn .pageAboutWords .pageTextInfo{float:right; width: 45.5%; display:table; height:402px;} #obtn .pageAboutWords .pageTextInfo .table{display: table-cell;vertical-align: middle; color:#333333; font-size: 20px; line-height: 40px;} @media screen and (max-width:1569px) { #obtn .pageAboutWords{margin: 110px 0;} #obtn .pageAboutWords .pageNumBox li{margin-right: 50px; padding-bottom:15px;} #obtn .pageAboutWords .pageNumBox li span{font-size: 58px; line-height: 50px;} #obtn .pageAboutWords .pageNumBox li em{font-size: 16px; line-height: 28px; height: 56px;} #obtn .pageAboutWords .pageTextInfo .table{font-size:17px; line-height:32px;} } @media screen and (max-width:1229px) { #obtn .pageAboutWords{margin: 80px 0;} #obtn .pageAboutWords .pageNumBox{ height:350px; } #obtn .pageAboutWords .pageNumBox ul{margin-top: 90px;} #obtn .pageAboutWords .pageNumBox li{margin-right: 30px;} #obtn .pageAboutWords .pageTextInfo{height: 350px;} #obtn .pageAboutWords .pageTextInfo .table{font-size: 16px; line-height: 28px;} } @media screen and (max-width:991px) { #obtn .pageAboutWords{margin: 60px 0;} #obtn .pageAboutWords .pageNumBox{ height:240px; width: 100%;} #obtn .pageAboutWords .pageNumBox ul{margin-top: 50px;} #obtn .pageAboutWords .pageNumBox li{margin-right:13%;} #obtn .pageAboutWords .pageTextInfo{height: auto; width: 100%; margin-top: 30px;} #obtn .pageAboutWords .pageTextInfo .table{font-size: 15px; line-height: 24px;} } @media screen and (max-width:767px) { #obtn .pageAboutWords{margin:40px 0;} #obtn .pageAboutWords .pageNumBox{height: 200px;} #obtn .pageAboutWords .pageNumBox ul{margin-top: 40px;} #obtn .pageAboutWords .pageNumBox li{margin-right: 3%;} #obtn .pageAboutWords .pageNumBox li span{font-size: 42px; line-height: 35px;} #obtn .pageAboutWords .pageNumBox li span i{font-size: 18px; line-height: 20px;} #obtn .pageAboutWords .pageNumBox li em{font-size: 14px; line-height: 24px;} #obtn .pageAboutWords .pageTextInfo{margin-top: 20px;} } @media screen and (max-width:415px) { #obtn .pageAboutWords .pageNumBox li{width: 30%;} #obtn .pageAboutWords .pageNumBox li em{word-break:break-all; word-wrap:break-word;} } /*2Honors & Certificates*/ #obtn .HonorsBox{float: left; width: 100%; background: #f4f4f5; position: relative} #obtn .HonorsBg{position: absolute;left: 0; top:0; width: 100%; height:100%;} #obtn .threeLevelNav{float: left; width: 100%; position: relative; z-index: 2; margin-top: 80px; background: #fff;} #obtn .threeLevelNav ul{display: block; width: 100%; text-align: center} #obtn .threeLevelNav li{display: inline-block; margin: 0 45px; line-height: 60px;} #obtn .threeLevelNav li a{float: left; color:#333333; font-size: 22px;} #obtn .threeLevelNav li a.on, #obtn .threeLevelNav li a:hover{color:#0068b7} @media screen and (max-width:1569px) { #obtn .threeLevelNav ul{height:50px;} #obtn .threeLevelNav li{ margin: 0 35px; line-height: 50px;} #obtn .threeLevelNav li a{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .threeLevelNav{margin-top:45px;} #obtn .threeLevelNav ul{height: 48px;} #obtn .threeLevelNav li{ margin: 0 25px; line-height:48px;} #obtn .threeLevelNav li a{font-size: 16px;} } @media screen and (max-width:991px) { #obtn .threeLevelNav{margin-top: 35px;} #obtn .threeLevelNav li a{font-size: 16px;} } @media screen and (max-width:767px) { #obtn .threeLevelNav{margin-top:30px;} #obtn .threeLevelNav ul{height: 45px;} #obtn .threeLevelNav li{ margin: 0 15px; line-height:45px;} #obtn .threeLevelNav li a{font-size: 14px;} } #obtn .aboutHonorsList{float: left; width: 100%; margin-top: -25px; position: relative; z-index: 2;} #obtn .aboutHonorsList ul{margin: 0 -2.1%;display: -webkit-flex;flex-wrap: wrap;align-items: flex-start;} #obtn .aboutHonorsList li{float: left; width: 33.333%; padding: 0 2.1%; margin-top: 65px;} #obtn .aboutHonorsList li a{float: left; width: 100%; background:#fff; padding: 34px 40px 39px 40px;} #obtn .aboutHonorsList li a .tText{float: left; width: 100%; color:#333333; font-size: 18px; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /*20201229start*/ #obtn .aboutHonorsList li a .dImg{padding-bottom: 63.75%; position: relative; overflow: hidden;} #obtn .aboutHonorsList li a .dImg img{width: 100%; position: absolute; left: 50%; top: 50%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} /*20201229end*/ @media screen and (max-width:1569px) { #obtn .aboutHonorsList{ margin-top: -10px;} #obtn .aboutHonorsList ul{margin: 0 -20px;} #obtn .aboutHonorsList li{padding: 0 20px; margin-top:40px;} #obtn .aboutHonorsList li a{padding: 25px 25px 30px 25px} #obtn .aboutHonorsList li a .tText{font-size: 16px; line-height: 26px;} #obtn .aboutHonorsList li a .dImg{margin-top: 20px;} } @media screen and (max-width:1229px) { #obtn .aboutHonorsList{ margin-top: 0;} #obtn .aboutHonorsList ul{margin: 0 -15px;} #obtn .aboutHonorsList li{padding: 0 15px; margin-top:30px;} #obtn .aboutHonorsList li a{padding: 20px 20px 25px 20px} #obtn .aboutHonorsList li a .tText{font-size: 14px;} } @media screen and (max-width:991px) { #obtn .aboutHonorsList ul{margin: 0 -10px;} #obtn .aboutHonorsList li{padding: 0 10px; margin-top:20px;} #obtn .aboutHonorsList li a{padding: 15px 15px 20px 15px} #obtn .aboutHonorsList li a .dImg{margin-top: 15px;} } @media screen and (max-width:767px) { #obtn .aboutHonorsList li{width: 100%;} } /* 鍒嗛〉 */ #obtn .wack1{ float:left; width:100%; padding:80px 0; text-align:center; position: relative; z-index: 2;} #obtn .wack1 .pz_fy{ display:inline-block; *display:inline; *zoom:1;} #obtn .wack1 .pz_fy a { float:left; width:64px; height:33px; line-height:33px; border: #cccccc 1px solid; color:#b3b3b3; font-size:18px; font-family:Arial; margin:0 15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #obtn .wack1 .pz_fy a:hover, #obtn .wack1 .pz_fy a.on{color:#fff; border:#0068b7 1px solid; background:#0068b7;} #obtn .wack1 .pz_fy .l_fy, #obtn .wack1 .pz_fy .r_fy{ width:106px;} @media screen and (max-width:1569px) { #obtn .wack1{ padding:60px 0;} #obtn .wack1 .pz_fy a { width:60px;font-size:16px; margin:0 10px;} } @media screen and (max-width:1229px) { #obtn .wack1 .pz_fy a { width:50px;font-size:16px; margin:0 5px;} } @media screen and (max-width:991px){ #obtn .wack1{padding:30px 0 40px 0;} #obtn .wack1 .fy_pc{ text-align:center; font-size:14px; color:#272727; padding:5px 0;} #obtn .wack1 .fy_pc a{ padding:5px 25px; color:#fff; font-family: Arial; border:solid 1px #0068b7; background:#0068b7; border-radius:16px; overflow:hidden;} #obtn .wack1 .fy_pc span{ padding:5px 20px; color:#272727;} } /*3sinee culture*/ #obtn .aboutCultureBox{float: left; width: 100%; position:relative} #obtn .aboutCultureImg{float: left; width: 100%; line-height: 0; text-align: right; position: relative} #obtn .aboutCultureImg:after{position: absolute; content:''; width: 60%; left: 0; top:0; height: 100%; background: #fff; background:-webkit-linear-gradient(left,#fff,#fff,rgba(255,255,255,0)); background:-o-linear-gradient(right,#fff,#fff,rgba(255,255,255,0)); background:-moz-linear-gradient(right,#fff,#fff,rgba(255,255,255,0)); background:linear-gradient(to right,#fff,#fff,rgba(255,255,255,0)); } #obtn .aboutCultureBox .aboutCultureInfo{position: absolute; width: 100%;left: 0; top:50%; margin-top: -50px;} #obtn .aboutCultureBox .aboutCultureInfo .titBox{float: left; width: 100%; color:#0068b7; font-size: 42px; line-height:40px; font-weight: 100;} #obtn .aboutCultureBox .aboutCultureInfo .p1{float: left; width: 100%; color:#333333; font-size: 28px; font-weight: bold; line-height: 35px; margin-top: 25px;} @media screen and (max-width:1569px) { #obtn .aboutCultureBox .aboutCultureInfo{margin-top: -40px;} #obtn .aboutCultureBox .aboutCultureInfo .titBox{font-size: 35px; line-height: 30px;} #obtn .aboutCultureBox .aboutCultureInfo .p1{font-size: 24px; margin-top: 15px;} } @media screen and (max-width:1229px) { #obtn .aboutCultureBox .aboutCultureInfo .titBox{font-size: 30px;} #obtn .aboutCultureBox .aboutCultureInfo .p1{font-size: 20px} } @media screen and (max-width:991px) { #obtn .aboutCultureBox .aboutCultureInfo{margin-top: -34px;} #obtn .aboutCultureBox .aboutCultureInfo .titBox{font-size: 26px; line-height: 28px;} #obtn .aboutCultureBox .aboutCultureInfo .p1{font-size:16px; margin-top: 10px; line-height: 30px;} } @media screen and (max-width:767px) { #obtn .aboutCultureBox .aboutCultureInfo .p1{font-size: 14px; line-height: 26px;} } #obtn .aboutCultureBox.rightBox .aboutCultureImg{text-align: left;} #obtn .aboutCultureBox.rightBox .aboutCultureImg:after{position: absolute; content:''; width: 60%; left: auto; right: 0; top:0; height: 100%; background: #fff; background:-webkit-linear-gradient(right,#0068b7,#0068b7,rgba(0,104,183,0)); background:-o-linear-gradient(left,#0068b7,#0068b7,rgba(0,104,183,0)); background:-moz-linear-gradient(left,#0068b7,#0068b7,rgba(0,104,183,0)); background:linear-gradient(to left,#0068b7,#0068b7,rgba(0,104,183,0)); } #obtn .aboutCultureBox.rightBox .aboutCultureInfo .titBox{text-align: right; color:#fff;} #obtn .aboutCultureBox.rightBox .aboutCultureInfo .p1{text-align: right;color:#fff;} /*4sinee history2*/ #obtn .deveHistoryBox{float: left; width: 100%; position: relative; padding: 100px 0 93px 0; } #obtn .deveHistoryBox:after{position: absolute; content: ''; width: 2px; height: 100%; background: #f4f4f5; left: 50%; margin-left: -1px; top:0;} #obtn .deveHistoryBox ul{float: left; width: 100%;max-height:1200px; padding-top: 10px; overflow:hidden; overflow-y:auto; scrollbar-width:thin;} #obtn .deveHistoryBox ul::-webkit-scrollbar {width:3px} #obtn .deveHistoryBox ul::-webkit-scrollbar-track {background-color:#e5e5e5;border-radius:3px} #obtn .deveHistoryBox ul::-webkit-scrollbar-thumb { width:3px; height:60px; background-color:#0068b7; border-radius:3px } #obtn .deveHistoryBox li{float: left; width: 100%; margin-top: -35px;min-height:157px;} #obtn .deveHistoryBox li:first-child{margin-top: 0;} #obtn .deveHistoryBox li .dl{float: left; width: 50%; padding:0 80px 0 267px; position: relative; } #obtn .deveHistoryBox li .dl em{position: absolute; z-index: 2; width: 90px; height: 90px; right: -44px; top:-10px; background: #f4f4f5; line-height: 90px; color:#0068b7; font-size: 24px; font-weight: bold; font-family: Arial; text-align: center; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #obtn .deveHistoryBox li .dl em:after{position: absolute; content: ''; left: -10px; top:50%; margin-top: -11px; width: 0; height: 0; border-top: 11px solid transparent; border-right: 11px solid #f4f4f5; border-bottom:11px solid transparent; } #obtn .deveHistoryBox li .dl .img{position: absolute; left: 0; top:0; width: 236px; height: 157px; line-height: 0;} #obtn .deveHistoryBox li .dl dd{float: left; width: 100%; color:#333333; font-size: 20px; line-height:36px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #obtn .deveHistoryBox li .dl .moreHis{float: left; width: 100%; margin-top: 20px; padding-left: 14px;} #obtn .deveHistoryBox li .dl .moreHis a{float: left; line-height: 28px;font-size: 16px; color:#888888; font-weight: bold; border-top:1px solid #0068b7; border-top:1px solid rgba(0,104,183,0.3);} #obtn .deveHistoryBox li .dl .moreHis a:hover{color:#0068b7; border-top:1px solid #0068b7;} #obtn .deveHistoryBox li:nth-child(2n) .dl{float: right;padding: 0 267px 0 80px;} #obtn .deveHistoryBox li:nth-child(2n) .dl .img{left: auto; right: 0;} #obtn .deveHistoryBox li:nth-child(2n) .dl em{left: auto; right:0; left: -44px;} #obtn .deveHistoryBox li:nth-child(2n) .dl em:after{left:auto;right: -10px; border-top:11px solid transparent; border-left:11px solid #f4f4f5; border-right:0; border-bottom:11px solid transparent; } @media screen and (max-width:1569px) { #obtn .deveHistoryBox{padding:80px 0 75px 0} #obtn .deveHistoryBox li .dl{padding: 0 60px 0 240px} #obtn .deveHistoryBox li:nth-child(2n) .dl{padding: 0 240px 0 60px} #obtn .deveHistoryBox li .dl .img{width: 210px; height: 139px;} #obtn .deveHistoryBox li .dl dd{font-size: 16px; line-height: 30px;} #obtn .deveHistoryBox li .dl em{width: 74px; height: 74px; line-height: 74px; font-size: 20px; right: -37px;} #obtn .deveHistoryBox li:nth-child(2n) .dl em{right: auto; left: -37px;} } @media screen and (max-width:1229px) { #obtn .deveHistoryBox{padding:70px 0 65px 0} } @media screen and (max-width:991px) { #obtn .deveHistoryBox{padding:60px 0 65px 0} #obtn .deveHistoryBox:after {left: auto; right: 37px;} #obtn .deveHistoryBox li{margin-top: 20px;} #obtn .deveHistoryBox li .dl{width: 100%; padding: 0 80px 0 240px} #obtn .deveHistoryBox li:nth-child(2n) .dl{padding: 0 80px 0 240px} #obtn .deveHistoryBox li .dl em{right: 0;} #obtn .deveHistoryBox li:nth-child(2n) .dl .img{left:0; right: auto;} #obtn .deveHistoryBox li:nth-child(2n) .dl em{right: 0; left: auto;} #obtn .deveHistoryBox li:nth-child(2n) .dl em:after{left:-10px;right:auto; border-top: 11px solid transparent; border-left: 0; border-right:11px solid #f4f4f5; border-bottom: 11px solid transparent; } } @media screen and (max-width:767px) { #obtn .deveHistoryBox{padding:40px 0} #obtn .deveHistoryBox:after{right:30px;} #obtn .deveHistoryBox li .dl, #obtn .deveHistoryBox li:nth-child(2n) .dl{padding: 0 80px 0 0;} #obtn .deveHistoryBox li .dl .img{position: static; width: 100%; height: auto;} #obtn .deveHistoryBox li .dl em{width: 60px; height: 60px; line-height: 60px; font-size: 18px;} #obtn .deveHistoryBox li .dl em:after{ margin-top: -6px; left: -5px; border-top: 6px solid transparent; border-right: 6px solid #f4f4f5; border-bottom: 6px solid transparent; } #obtn .deveHistoryBox li:nth-child(2n) .dl em:after{left:-5px; border-top: 6px solid transparent; border-right: 6px solid #f4f4f5; border-bottom: 6px solid transparent; } #obtn .deveHistoryBox li .dl dd{font-size: 14px; line-height: 26px; margin-top: 15px;} #obtn .deveHistoryBox li .dl .moreHis{margin-top: 10px; padding-left: 0;} #obtn .deveHistoryBox li .dl .moreHis a{font-size: 15px;} } /*5SINEE NEWS*/ #obtn .pageNewsBox{float: left; width: 100%; margin: 50px 0 0 0;} #obtn .pageNewsBox .title{float: left; width: 100%; } #obtn .pageNewsBox .title h2{float: left;color:#333333; font-size: 48px; line-height: 60px; font-weight: bold;} #obtn .pageNewsBox .btnNum{float: right; color:#ababab; font-size: 24px; line-height: 60px;} #obtn .pageNewsBox .btnNum .num{font-size: 24px; color:#0068b7; font-weight: bold;} #obtn .RecNewsBox{float: left; width: 100%; margin-top: 30px;} #obtn .RecNewsBox .slick-prev{ width:55px; height:55px; background:#cccccc;} #obtn .RecNewsBox .slick-next{ width:55px; height:55px; background:#cccccc;} #obtn .RecNewsBox .liBox{float: left; width: 100%; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out;} #obtn .RecNewsBox .liBox a{float: left; width: 100%; background: #fff; box-shadow: 0 0 27px rgba(0,0,0,0.06); -moz-box-shadow: 0 0 27px rgba(0,0,0,0.06); -webkit-box-shadow: 0 0 27px rgba(0,0,0,0.06); } #obtn .RecNewsBox .liBox a .lImg{float: left; width: 60%;line-height: 0; overflow: hidden;} #obtn .RecNewsBox .liBox a .lImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .RecNewsBox .liBox a:hover .lImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .RecNewsBox .liBox a .rightText{float: right; width: 34%; margin-right: 3.2%; margin-left:2.8%; position: relative;} #obtn .RecNewsBox .liBox a .rightText .time{float: left; width: 100%; margin-top: 45px; color:#ababab; position: relative} #obtn .RecNewsBox .liBox a .rightText .time:after{position: absolute; content: ''; left: 0; bottom: -5px; width: 92px; height: 5px; background: #0068b7;} #obtn .RecNewsBox .liBox a .rightText .time span{float: left; font-size: 90px; line-height:105px; font-family: Arial; font-weight: bold;} #obtn .RecNewsBox .liBox a .rightText .time em{float: left; font-size: 24px; line-height: 24px; font-weight: bold;font-family: Arial; margin: 35px 0 0 20px;} #obtn .RecNewsBox .liBox a .rightText .tH1Box{float: left; width: 100%; margin-top: 75px; color:#333333; font-size: 30px; line-height: 40px; font-family: Arial; overflow:hidden;white-space: nowrap; text-overflow:ellipsis; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .RecNewsBox .liBox a .rightText .p1{float: left; width: 100%; color:#555555; font-size: 18px; line-height: 30px; height:120px; font-family: Arial; margin: 20px 0 35px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #obtn .RecNewsBox .liBox a .rightText .more{float: left; width: 100%; text-align: right; color:#005ca1; font-size: 16px; font-weight:bold; line-height: 30px; margin-top: 30px;} #obtn .RecNewsBox .liBox a:hover .rightText .tH1Box{color:#0068b7;} @media screen and (max-width:1569px) { #obtn .RecNewsBox .liBox a .rightText .time{margin-top: 25px;} #obtn .RecNewsBox .liBox a .rightText .tH1Box{font-size: 26px; line-height: 35px; margin-top: 40px;} #obtn .RecNewsBox .liBox a .rightText .p1{font-size: 16px; line-height: 28px; height: 112px;} } @media screen and (max-width:1229px) { #obtn .RecNewsBox .liBox a .lImg{width: 55%;} #obtn .RecNewsBox .liBox a .rightText{width:39%;} #obtn .RecNewsBox .liBox a .rightText .time{margin-top: 15px;} #obtn .RecNewsBox .liBox a .rightText .time span{font-size: 70px; line-height: 90px;} #obtn .RecNewsBox .liBox a .rightText .time em{margin: 25px 0 0 20px; font-size: 20px;} #obtn .RecNewsBox .liBox a .rightText .time:after{width: 70px; height: 3px; bottom: -3px;} #obtn .RecNewsBox .liBox a .rightText .tH1Box{font-size: 24px; margin-top: 30px;} #obtn .RecNewsBox .liBox a .rightText .p1{font-size: 15px; line-height: 26px; height: 78px; margin: 20px 0 25px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #obtn .RecNewsBox .liBox a .rightText .more{margin-top: 0;} } @media screen and (max-width:991px) { #obtn .pageNewsBox{ margin:30px 0 0 0;} #obtn .RecNewsBox{ margin-top:15px;} #obtn .pageNewsBox .title h2{ font-size:20px; line-height:40px;} #obtn .pageNewsBox .btnNum{ line-height:40px; font-size:18px;} #obtn .RecNewsBox .liBox a .lImg{width: 100%;} #obtn .RecNewsBox .liBox a .rightText{width: 100%;margin-right:0; margin-left:0; padding: 0 20px 20px 20px;} #obtn .RecNewsBox .liBox a .rightText .tH1Box{ line-height: 30px; margin-top: 16px;} #obtn .RecNewsBox .liBox a .rightText .p1{margin:6px 0 6px 0; line-height:24px; height:72px;} #obtn .RecNewsBox .liBox a .rightText .time{margin-top: 10px;} #obtn .RecNewsBox .liBox a .rightText .time span{ font-size:40px; line-height:60px;} #obtn .RecNewsBox .liBox a .rightText .time em{ font-size:16px; line-height:18px; margin:15px 0 0 10px;} } @media screen and (max-width:767px) { #obtn .RecNewsBox .liBox a .rightText .time span{font-size: 60px; line-height:70px;} #obtn .RecNewsBox .liBox a .rightText .time em{font-size: 18px; line-height: 20px; margin: 17px 0 0 15px} #obtn .RecNewsBox .liBox a .rightText .time:after{width: 60px;} #obtn .RecNewsBox .liBox a .rightText .tH1Box{font-size: 20px;} } #obtn .pageNewsList{float: left; width: 100%;} #obtn .pageNewsList li{float: left; width: 100%;} #obtn .pageNewsList li a{float: left; width: 100%; padding: 50px 0; border-bottom: 1px solid #e3e3e3; position: relative} #obtn .pageNewsList li a:after{position: absolute; content: ''; width:0; height: 1px; background: #0068b7; left: 0; bottom:-1px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .pageNewsList li a .leftText{float: left; width:67.5%;} #obtn .pageNewsList li a:hover:after{width: 100%;} #obtn .pageNewsList li a .leftText .tTime{float: left; width: 100%; color:#888888; font-size: 16px; font-weight: bold; line-height: 40px; margin-top: 12px;} #obtn .pageNewsList li a .leftText .tTime span{font-size:30px; color:#333333;} #obtn .pageNewsList li a .leftText .tH1{float: left; width: 100%; margin-top: 28px; color:#333333; font-size: 26px; line-height: 30px; font-family: Arial; max-height: 60px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; } #obtn .pageNewsList li a:hover .leftText .tH1{color:#0068b7;font-weight:bold;} #obtn .pageNewsList li a .leftText .p2{float: left; width: 100%; color:#555555; font-size: 18px; line-height: 30px; margin-top: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; } #obtn .pageNewsList li a .leftText .more{float: left; width: 100%; margin-top: 45px; color:#888888; font-size: 16px; line-height: 32px; font-weight: bold; font-family: Arial; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .pageNewsList li a:hover .leftText .more{color:#0068b7;} #obtn .pageNewsList li a .rightImg{float: right; width: 28.66%; line-height: 0; overflow: hidden;} #obtn .pageNewsList li a .rightImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .pageNewsList li a:hover .rightImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } @media screen and (max-width:1569px) { #obtn .pageNewsList li a{padding: 35px 0;} #obtn .pageNewsList li a .leftText .tTime{margin-top: 0;font-size: 15px; line-height: 35px;} #obtn .pageNewsList li a .leftText .tTime span{font-size: 24px;} #obtn .pageNewsList li a .leftText .tH1{margin-top:20px; font-size: 22px;} #obtn .pageNewsList li a .leftText .p2{font-size: 16px; line-height: 28px; margin-top: 15px;} #obtn .pageNewsList li a .leftText .more{margin-top: 35px;} } @media screen and (max-width:1229px) { #obtn .pageNewsList li a .leftText{width: 61%;} #obtn .pageNewsList li a .rightImg{width: 36%;} } @media screen and (max-width:991px) { #obtn .pageNewsList li a{padding:25px 0;} #obtn .pageNewsList li a .leftText .tH1{font-size: 18px; margin-top: 15px;} #obtn .pageNewsList li a .leftText .p2{font-size: 14px; line-height: 26px;} #obtn .pageNewsList li a .leftText .more{font-size: 15px; margin-top: 20px;} } @media screen and (max-width:767px) { #obtn .pageNewsList li a{padding: 20px 0;} #obtn .pageNewsList li a .leftText{width: 100%;} #obtn .pageNewsList li a .rightImg{width: 100%; margin-top: 15px;} #obtn .pageNewsList li a .leftText .tH1{margin-top: 10px;} #obtn .pageNewsList li a .leftText .more{margin-top: 10px;} } /*6SINEE NEWS-details*/ #obtn .topNewsBg{float: left; width: 100%; background: #f4f4f5;} #obtn .topNewsBg .newsTitBox{text-align:center; width: 100%; margin: 54px 0 51px 0; padding: 0 160px; position: relative;} #obtn .topNewsBg .newsTitBox .returnBox{position: absolute; width: 75px; left: 0; bottom: 10px;} #obtn .topNewsBg .newsTitBox .returnBox i{display: block; text-align: center; line-height: 0;} #obtn .topNewsBg .newsTitBox .returnBox i img{background: #fff; border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;} #obtn .topNewsBg .newsTitBox .returnBox span{display: block; color:#888888; font-size: 14px; line-height: 24px; margin-top: 7px; text-align: center;} #obtn .topNewsBg .newsTitBox .returnBox a:hover span{color:#0068b7} #obtn .topNewsBg .newsTitBox h1{text-align:center; width: 100%; color:#333333; font-size: 36px; line-height: 40px; font-family: Arial;} #obtn .topNewsBg .newsTitBox .time{text-align:center; width: 100%; margin-top: 20px;} #obtn .topNewsBg .newsTitBox .time span{text-align:center; color:#888888; font-size: 16px; line-height: 40px;font-weight: bold;} #obtn .topNewsBg .newsTitBox .time span b{color:#333333; font-size: 30px;} #obtn .topNewsBg .newsTitBox .time .rightFy{float: right; color:#666666; font-weight: bold; line-height: 30px; margin-top: 10px;font-size: 18px;} #obtn .topNewsBg .newsTitBox .time .rightFy a{color:#666666;} #obtn .topNewsBg .newsTitBox .time .rightFy a:hover{color:#0068b7} @media screen and (max-width:1569px) { #obtn .topNewsBg .newsTitBox{margin: 45px 0;padding: 0 120px;} #obtn .topNewsBg .newsTitBox h1{font-size:28px; line-height: 36px;} #obtn .topNewsBg .newsTitBox .time span b{font-size: 24px;} #obtn .topNewsBg .newsTitBox .time .rightFy{font-size: 16px;} } @media screen and (max-width:1229px) { #obtn .topNewsBg .newsTitBox{margin:30px 0;padding: 0 0 0 120px;} #obtn .topNewsBg .newsTitBox h1{font-size: 24px; line-height: 32px;} #obtn .topNewsBg .newsTitBox .time{margin-top: 15px;} #obtn .topNewsBg .newsTitBox .returnBox i img{width:45px; height: 45px;} } @media screen and (max-width:991px) { #obtn .topNewsBg .newsTitBox{margin:20px 0;padding: 0 0 0 100px;} #obtn .topNewsBg .newsTitBox h1{font-size: 20px; line-height: 28px;} #obtn .topNewsBg .newsTitBox .time span{font-size: 14px; line-height: 35px;} #obtn .topNewsBg .newsTitBox .time .rightFy{font-size: 14px; margin-top:5px;} } @media screen and (max-width:767px) { #obtn .topNewsBg .newsTitBox{padding: 0 0 0 80px;} #obtn .topNewsBg .newsTitBox .returnBox{width: 70px;} #obtn .topNewsBg .newsTitBox .returnBox span{font-size: 12px;} #obtn .topNewsBg .newsTitBox h1{font-size: 18px; line-height:26px;} } #obtn .newsInfoBox{float: left; width: 100%; margin: 25px 0 25px 0; padding: 0 160px; color:#555555; font-size: 18px; line-height: 36px;} #obtn .theEnd{float: left; width: 100%;display: block; text-align: center; position: relative; margin-bottom: 70px;} #obtn .theEnd span{display: inline-block; color:#333333; font-size: 18px; font-weight: bold; line-height: 30px; padding: 0 20px; background: #fff;position: relative; z-index: 2;} #obtn .theEnd:after{position: absolute; content:''; width: 100%; height: 1px; top:50%; left: 0; background: #e7e7e7;} @media screen and (max-width:1569px) { #obtn .newsInfoBox{margin: 70px 0 50px 0; padding: 0 120px;font-size: 16px; line-height: 30px;} } @media screen and (max-width:1229px) { #obtn .newsInfoBox{margin: 50px 0 40px 0; padding: 0;font-size: 16px; line-height: 30px;} #obtn .theEnd{margin-bottom:60px;} } @media screen and (max-width:767px) { #obtn .newsInfoBox{margin:35px 0 30px 0;font-size: 14px; line-height:26px;} #obtn .theEnd{margin-bottom: 40px;} } /*7products*/ #obtn .pageProGrey{float:left; width: 100%; background: #f4f4f5; position: relative} #obtn .pageProGrey:after{position: absolute; content: ''; width: 16%; height: 100%; background: #fff; left: 0;} #obtn .proListBox{float: left; width: 100%; padding-left: 290px; position: relative} #obtn .proLeftSlide{position: absolute; z-index: 3; left: 0; width: 290px; height: 100%; background: #fff;} #obtn .proLeftSlide ul{float: left; width: 100%; text-align: center; margin-top: 20px;} #obtn .proLeftSlide li{float: left; width: 100%; margin-top: 55px;} #obtn .proLeftSlide li a{float: left; width: 100%; position: relative} #obtn .proLeftSlide li a:after{position: absolute;content: ''; right: -19px; top:35px;width: 0;height: 0;opacity:0;filter:alpha(opacity=0); border-top: 17px solid transparent; border-left: 19px solid #fff; border-bottom: 17px solid transparent; } #obtn .proLeftSlide li a .tImg{float: left; width: 100%;text-align: center; line-height: 0; position: relative} #obtn .proLeftSlide li a .tImg i{float: left; width: 100%; line-height: 0;} #obtn .proLeftSlide li a .tImg i:last-child{position: absolute; width: 100%; left: 0; top:0; opacity: 0;filter:alpha(opacity=0); transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proLeftSlide li a .dText{float: left; width: 100%; margin-top: 5px; color:#333333; font-size:22px; line-height: 10px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proLeftSlide li a:hover:after, #obtn .proLeftSlide li a.on:after{opacity:1;filter:alpha(opacity=100);} #obtn .proLeftSlide li a.on .tImg i:last-child, #obtn .proLeftSlide li a:hover .tImg i:last-child{opacity:1;filter:alpha(opacity=100);} #obtn .proLeftSlide li a.on .dText, #obtn .proLeftSlide li a:hover .dText{color:#0068b7;font-weight:bold} #obtn .proRightList{float: left; width: 100%; padding-left: 120px; margin-top: 20px;} #obtn .proRightList ul{margin: 0 -30px} #obtn .proRightList li{float: left; width: 50%; padding: 0 30px; margin-top: 60px;} #obtn .proRightList li a{float: left; width: 100%; background: #f6f6f6; position: relative;} #obtn .proRightList li a:hover{ box-shadow: 0 0 29px rgba(0,0,0,0.05); -moz-box-shadow: 0 0 29px rgba(0,0,0,0.05); -webkit-box-shadow: 0 0 29px rgba(0,0,0,0.05); } #obtn .proRightList li a .tImg{float: left; width: 100%; line-height: 0; overflow: hidden;} #obtn .proRightList li a .tImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proRightList li a span{/*position: absolute;*/ width: 100%; /*left: 0;*/ float:left; padding: 10px 10px; background:#fff; bottom:20px; line-height: 40px; color:#333333; font-size: 20px; text-align: center; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } #obtn .proRightList li a:hover .tImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .proRightList li a:hover span{color:#0068b7;} @media screen and (max-width:1569px) { #obtn .proLeftSlide li{margin-top: 40px;} #obtn .proLeftSlide li a .tImg i img{width: 80px;} #obtn .proLeftSlide li a .dText{font-size: 18px; margin-top: 15px;} #obtn .proRightList{padding-left: 90px;margin-top: 20px;} #obtn .proRightList li a span{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .proListBox{padding-left: 250px;} #obtn .proLeftSlide{width: 250px;} #obtn .proLeftSlide li{margin-top: 30px;} #obtn .proLeftSlide li a .tImg i img{width: 70px;} #obtn .proLeftSlide li a .dText{font-size: 16px; margin-top: 10px;} #obtn .proRightList ul{margin:0 -20px;} #obtn .proRightList li{padding: 0 20px;margin-top: 40px;} #obtn .proRightList li a span{bottom: 15px; font-size: 16px;} } @media screen and (max-width:991px) { #obtn .proListBox{padding-left: 200px;} #obtn .proLeftSlide{width: 200px;} #obtn .proLeftSlide ul{margin-top:30px;} #obtn .proLeftSlide li a .tImg i img{width: 50px; height: 50px;} #obtn .proLeftSlide li a .dText{font-size: 14px;} #obtn .proLeftSlide li a:after{ right: -12px; top:20px; border-top: 10px solid transparent; border-left: 12px solid #fff; border-bottom: 10px solid transparent; } #obtn .proRightList{padding-left:60px;} #obtn .proRightList ul{margin: 0 -15px;} #obtn .proRightList li{padding: 0 15px; margin-top: 30px;} #obtn .proRightList li a span{font-size: 14px; bottom:5px;} } @media screen and (max-width:767px) { #obtn .pageProGrey:after{display: none;} #obtn .proListBox{padding-left: 0;} #obtn .proLeftSlide{width: 100%; position: static; float: left;} #obtn .proLeftSlide ul{margin-top: 0;} #obtn .proLeftSlide li{width: 33.333%; margin: 15px 0;} #obtn .proLeftSlide li a .tImg i img{width: 40px; height: 40px;} #obtn .proLeftSlide li a .dText{font-size: 14px; line-height: 24px;} #obtn .proRightList{padding-left: 0; margin-top:10px;} #obtn .proRightList ul{margin: 0 -7px;} #obtn .proRightList li{padding: 0 7px; margin-top: 15px;} #obtn .proRightList li a span{font-size: 14px; bottom: 0;} } /*8products-details*/ #obtn .pageProGrey1{float: left; width: 100%; background: #f6f6f6;} #obtn .ShareBox{float: left; width: 100%; margin-top:45px; position: relative} #obtn .ShareBox .returnBox{position: absolute; width: 75px; left: -85px; top:0; z-index: 2;} #obtn .ShareBox .returnBox i{display: block; text-align: center; line-height: 0;} #obtn .ShareBox .returnBox i img{background: #fff; border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;} #obtn .ShareBox .returnBox em{display: block; color:#888888; font-size: 14px; line-height: 24px; margin-top: 7px; text-align: center;} #obtn .ShareBox .returnBox a:hover em{color:#0068b7} #obtn .ShareBox span{float:right; color:#555555; font-size: 16px; line-height: 30px; cursor: pointer} #obtn .ShareBox span img{vertical-align: middle; margin-top: -2px;} #obtn .ShareBox span:hover{color:#0068b7} #obtn .leftImgBox{float: left; width:43%; margin-bottom: 110px;} #obtn .leftImgBox .tImg{float: left; width: 100%; line-height: 0;} #obtn .leftImgBox .slick-dots{height: 10px; bottom: -30px;} #obtn .leftImgBox .slick-dots li{width: 10px; height: 10px; margin: 0 11px; background: #707070;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px; } #obtn .leftImgBox .slick-dots li.slick-active{background: #0068b7;} #obtn .leftImgBox .slick-prev, #obtn .leftImgBox .slick-next{width: 30px; height: 30px; border:1px solid #757575; background: url("_im_g/pro8.png") no-repeat; background-size: cover; bottom:-60px;left: 50%; margin-left: -120px; top: auto; margin-top: 0; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } #obtn .leftImgBox .slick-next{background: url("_im_g/pro9.png") no-repeat; background-size: cover; left: auto; right: 50%; margin-left: auto; margin-right: -120px;} #obtn .rightTextBox{float: right; width: 49%; margin-bottom: 130px;} #obtn .rightTextBox .tit{float: left; width: 100%; margin-top: 69px; color:#333333; font-size: 30px; font-weight: bold; line-height: 40px;} #obtn .rightTextBox .tit1{float: right; width: 100%; margin-top: 10px; color:#003366; font-size: 20px; font-weight: bold; line-height: 30px;} #obtn .rightTextBox .p1{float: left; width: 100%; margin-top: 45px; color:#333333; font-size: 16px; line-height: 32px;} #obtn .rightTextBox .more{float: right; width: 100%; margin-top: 90px; } #obtn .rightTextBox .more a{float: right; width: 166px; height: 54px; margin-top:22px; background:#0068b7;color:#fff; font-size:20px; line-height:54px; text-align: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #obtn .rightTextBox .more img{width:120px; float:left;padding-left:20px;} #obtn .rightTextBox .more a:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2); } @media screen and (max-width:1569px) { #obtn .rightTextBox{margin-bottom: 80px;} #obtn .rightTextBox .tit{margin-top:15px;font-size: 24px; line-height: 30px;} #obtn .rightTextBox .p1{margin-top:35px; line-height: 28px;} #obtn .rightTextBox .more{margin-top:50px;} } @media screen and (max-width:1229px) { #obtn .leftImgBox{margin-bottom:80px;} #obtn .rightTextBox{margin-bottom: 50px;} #obtn .rightTextBox .p1{margin-top: 20px; font-size: 14px; line-height: 26px;} #obtn .rightTextBox .more{margin-top: 30px;} #obtn .rightTextBox .more a{height: 45px; line-height: 45px; font-size: 18px;} } @media screen and (max-width:991px) { #obtn .ShareBox{margin-top: 30px;} #obtn .leftImgBox{width: 100%; margin-bottom: 50px;} #obtn .rightTextBox{width: 100%;} #obtn .ShareBox .returnBox i img{width: 45px; height: 45px;} } @media screen and (max-width:767px) { #obtn .ShareBox .returnBox{left: 0; top:-10px; width: 150px;} #obtn .ShareBox .returnBox i{float: left;} #obtn .ShareBox .returnBox i img{width: 40px; height: 40px;} #obtn .ShareBox .returnBox em{float: left; margin-top: 0; line-height: 40px; margin-left: 10px;} #obtn .rightTextBox{margin-bottom: 40px;} #obtn .rightTextBox .more{margin-top: 25px;} #obtn .rightTextBox .more a{font-size: 16px; line-height: 40px; height: 40px;} #obtn .leftImgBox{margin-top: 10px;} #obtn .rightTextBox .more img{display:none;} } #obtn .proTecData{float: left; width: 100%; margin: 88px 0 100px 0;} #obtn .proTecData .tH1{float: left; width: 100%; text-align: center; color:#333333; font-size: 48px; line-height: 60px; font-weight: bold;} #obtn .proTecData .proTecDataList{float: left; width: 100%; margin-top: 48px;} #obtn .proTecData .proTecDataHd{float: left; width: 100%;} #obtn .proTecData .proTecDataHd ul{margin: 0 -2px;} #obtn .proTecData .proTecDataHd li{float: left; width: 25%; padding:0 2px; text-align: center; } #obtn .proTecData .proTecDataHd li a{float: left; width: 100%; height: 68px;line-height: 68px; font-size: 20px;color:#fff; background: #ababab; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proTecData .proTecDataHd li:hover a, #obtn .proTecData .proTecDataHd li.on a{background: #0068b7;} #obtn .proTecData .proTecDataBd{float: left; width: 100%;} #obtn .proTecData .proTecDataBd .u1{float: left; width: 100%;} #obtn .proTecData .proTecDataBd .u1 li{float: left; width: 50%; padding-right: 15px; margin-top: 30px;} #obtn .proTecData .proTecDataBd .u1 li:nth-child(2n){padding: 0 0 0 15px;} #obtn .proTecData .proTecDataBd .u1 li a{float: left; width: 100%; background: #f6f6f6; padding: 30px 20px 30px 130px; position: relative} #obtn .proTecData .proTecDataBd .u1 li a:hover{background: #0068b7;} #obtn .proTecData .proTecDataBd .u1 li a span{position: absolute; width: 70px; height: 70px; left: 29px; top:50%; margin-top: -35px; line-height: 0;} #obtn .proTecData .proTecDataBd .u1 li a span img{background: #fff; border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px; } #obtn .proTecData .proTecDataBd .u1 li a .textBox{float: left; width: 100%; height: 70px;display: table;} #obtn .proTecData .proTecDataBd .u1 li a .textBox .table{display: table-cell; vertical-align: middle;} #obtn .proTecData .proTecDataBd .u1 li a .textBox .table em{display: block; color:#0068b7; font-size: 14px;line-height: 20px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proTecData .proTecDataBd .u1 li a:hover .textBox .table em{color:#fff;} #obtn .proTecData .proTecDataBd .u1 li a .textBox .table .p1{display: block; color:#333333; font-size: 20px; line-height: 26px; margin-top: 3px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proTecData .proTecDataBd .u1 li a:hover .textBox .table .p1{color:#fff;} @media screen and (max-width:1569px) { #obtn .proTecData{margin:70px 0 80px 0} #obtn .proTecData .tH1{font-size: 38px; line-height: 45px;} #obtn .proTecData .proTecDataList{margin-top: 40px;} #obtn .proTecData .proTecDataHd li a{height: 55px; line-height: 55px; font-size: 18px;} #obtn .proTecData .proTecDataBd .u1 li a{padding: 20px 20px 20px 130px} } @media screen and (max-width:1229px) { #obtn .proTecData{margin:60px 0 70px 0} #obtn .proTecData .tH1{font-size: 32px; line-height: 40px;} #obtn .proTecData .proTecDataHd li a{font-size: 16px; line-height: 50px; height: 50px;} #obtn .proTecData .proTecDataBd .u1 li{padding-right: 10px; margin-top: 20px;} #obtn .proTecData .proTecDataBd .u1 li:nth-child(2n){padding: 0 0 0 10px;} #obtn .proTecData .proTecDataBd .u1 li a{padding: 20px 20px 20px 100px} #obtn .proTecData .proTecDataBd .u1 li a .textBox .table .p1{font-size: 18px;} #obtn .proTecData .proTecDataBd .u1 li a span{left: 15px;} } @media screen and (max-width:991px) { #obtn .proTecData .proTecDataBd .u1 li a .textBox .table .p1{font-size: 16px;} } @media screen and (max-width:767px) { #obtn .proTecData{margin: 40px 0;} #obtn .proTecData .tH1{font-size: 26px; line-height: 35px;} #obtn .proTecData .proTecDataList{margin-top: 25px;} #obtn .proTecData .proTecDataHd li a{font-size: 14px;} #obtn .proTecData .proTecDataBd .u1 li{width: 100%; padding: 0;} #obtn .proTecData .proTecDataBd .u1 li:nth-child(2n){padding: 0;} #obtn .proTecData .proTecDataBd .u1 li a{padding: 15px 15px 15px 90px} #obtn .proTecData .proTecDataBd .u1 li a span{width: 60px; height: 60px; margin-top: -30px;} } /*9solutions*/ #obtn .pageOurSuccess{float: left; width: 100%; margin: 80px 0 100px 0;} #obtn .sucTit{float: left; width: 100%; color:#0068b7; font-size: 48px; line-height: 60px; text-align: center;} #obtn .pageOurSuccess .p1{float: left; width: 100%; text-align: center; color:#333333; font-size: 18px; line-height: 32px; margin-top: 25px; font-family:Arial;} #obtn .pageOurSuccess .p1 span{display: block;} #obtn .pageOurSuccess .pageOurSucList{float: left; width: 100%; margin-top: 45px;} #obtn .pageOurSuccess .pageOurSucList ul{float: left; width: 100%;} #obtn .pageOurSuccess .pageOurSucList li{float: left; width:20%; background: #eeeef0; cursor: pointer; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; } #obtn .pageOurSuccess .pageOurSucList li:hover{background: #0068b7} #obtn .pageOurSuccess .pageOurSucList li:nth-child(2n){background: #f8f8f9;} #obtn .pageOurSuccess .pageOurSucList li:nth-child(2n):hover{background: #0068b7} #obtn .pageOurSuccess .pageOurSucList li .tImg{float: left; width: 100%; text-align: center;position:relative; margin-top: 67px;} #obtn .pageOurSuccess .pageOurSucList li .tImg img{ transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; } /*#obtn .pageOurSuccess .pageOurSucList li:hover .tImg img{*/ /* transform:rotateY(360deg);*/ /* -ms-transform:rotateY(360deg);*/ /* -moz-transform:rotateY(360deg);*/ /* -webkit-transform:rotateY(360deg);*/ /* -o-transform:rotateY(360deg);*/ /*}*/ #obtn .pageOurSuccess .pageOurSucList li .tImg i{float: left; line-height: 0; width: 100%; text-align: center; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; } #obtn .pageOurSuccess .pageOurSucList li .tImg i:last-child{position: absolute; width: 100%; left: 0; top:0; opacity: 0;filter:alpha(opacity=0);} #obtn .pageOurSuccess .pageOurSucList li:hover .tImg i{opacity:0;filter:alpha(opacity=0);} #obtn .pageOurSuccess .pageOurSucList li:hover .tImg i:last-child{opacity: 1;filter:alpha(opacity=100);} #obtn .pageOurSuccess .pageOurSucList li .dTex{float: left; width: 100%; text-align: center; margin-top: 30px; color:#333333; font-size: 20px; line-height: 30px; height: 90px; margin-bottom: 17px; padding: 0 10px; font-family: Arial; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; } #obtn .pageOurSuccess .pageOurSucList li:hover .dTex{color:#fff;} @media screen and (max-width:1569px) { #obtn .pageOurSuccess{margin: 80px 0;} #obtn .sucTit{font-size: 38px; line-height: 45px;} #obtn .pageOurSuccess .p1{font-size: 16px; line-height: 28px; margin-top: 20px;} #obtn .pageOurSuccess .p1 span{display:inline;} #obtn .pageOurSuccess .pageOurSucList{margin-top: 40px;} #obtn .pageOurSuccess .pageOurSucList li .tImg{margin-top: 50px;} #obtn .pageOurSuccess .pageOurSucList li .tImg img{width: 90px; height: 90px;} #obtn .pageOurSuccess .pageOurSucList li .dTex{font-size: 18px; line-height: 28px; height: 84px;} } @media screen and (max-width:1229px) { #obtn .pageOurSuccess{margin: 65px 0;} #obtn .sucTit{font-size: 32px; line-height: 40px;} #obtn .pageOurSuccess .p1{font-size: 14px; line-height: 26px;} #obtn .pageOurSuccess .pageOurSucList li .tImg{margin-top: 35px;} #obtn .pageOurSuccess .pageOurSucList li .tImg i img{width:70px; height: 70px;} #obtn .pageOurSuccess .pageOurSucList li .dTex{font-size: 16px; line-height: 26px; height: 78px;margin-top: 20px;} } @media screen and (max-width:991px) { #obtn .pageOurSuccess .pageOurSucList li .tImg i img{width: 60px; height: 60px;} #obtn .pageOurSuccess .pageOurSucList li .dTex{font-size: 15px;} } @media screen and (max-width:767px) { #obtn .pageOurSuccess{margin:40px 0;} #obtn .sucTit{font-size: 26px; line-height: 35px;} #obtn .pageOurSuccess .p1{margin-top: 15px;} #obtn .pageOurSuccess .pageOurSucList{margin-top: 25px;} #obtn .pageOurSuccess .pageOurSucList li{width: 33.3333%;} #obtn .pageOurSuccess .pageOurSucList li .tImg{margin-top: 25px;} #obtn .pageOurSuccess .pageOurSucList li .tImg i img{width: 50px; height: 50px;} } #obtn .SucRecCases{float: left; width: 100%; margin-top: 88px;} #obtn .SucRecList{float: left; width: 100%; margin-top: 35px;} #obtn .SucRecList ul{margin: 0 -15px;} #obtn .SucRecList li{float: left; width:25%; padding: 0 15px;} #obtn .SucRecList li a{float: left; width: 100%;} #obtn .SucRecList li a .tImg{float: left; width: 100%; line-height: 0; overflow: hidden;} #obtn .SucRecList li a .tImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .SucRecList li a:hover .tImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .SucRecList li a .dText{float: left; width: 100%; color:#333333; font-size:20px; line-height: 24px; margin-top: 27px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5; } #obtn .SucRecList li a .dText em{float: left; width: 100%; font-family: Arial; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; } @media screen and (max-width:1569px) { #obtn .SucRecCases{margin-top: 70px;} #obtn .SucRecList ul{margin: 0 -10px;} #obtn .SucRecList li{padding: 0 10px;} #obtn .SucRecList li a .dText{font-size: 18px;margin-top: 20px;padding-bottom: 20px;} } @media screen and (max-width:1229px) { #obtn .SucRecCases{margin-top: 55px;} #obtn .SucRecList{margin-top: 30px;} #obtn .SucRecList li a .dText{font-size: 16px;} } @media screen and (max-width:767px) { #obtn .SucRecCases{margin-top:40px;} #obtn .SucRecList{margin-top:10px;} #obtn .SucRecList ul{margin: 0 -7px;} #obtn .SucRecList li{width: 50%; margin-top: 15px; padding: 0 7px;} #obtn .SucRecList li a .dText{font-size: 15px; margin-top: 10px; padding-bottom: 10px;} } /*10solutions-list*/ #obtn .goBack{float: left; width: 100%; margin-top: 40px;} #obtn .goBack a{float: right;} #obtn .goBack a span{float: left; color:#888888; font-size: 14px; line-height: 56px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .goBack a em{float: left; margin-left: 16px; line-height: 0;} #obtn .goBack a em img{background: #fff; border-radius: 35px;-moz-border-radius: 35px;-webkit-border-radius: 35px; } #obtn .goBack a:hover span{color:#0068b7} #obtn .proScreenBox{float: left; width: 100%; margin-top: 4px;} #obtn .proScreenBox .ulIBox{float: left; width: 100%; background: #fff; padding: 18px 40px 19px 180px; margin-top: 10px; position: relative;} #obtn .proScreenBox .ulIBox .leftTit{position: absolute; left: 30px; line-height: 42px; font-size: 20px; color:#0068b7; top:18px; font-family: Arial;} #obtn .proScreenBox .ulIBox:after{position: absolute; content: ''; width: 1px; height: 18px;left: 141px; top:30px; background: #cccccc;} #obtn .proScreenBox .ulIBox .listLi{float: left; width: 100%; height: 42px; overflow: hidden; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proScreenBox .ulIBox .listLi li{float: left; margin-right: 55px;} #obtn .proScreenBox .ulIBox .listLi li a{float: left; line-height: 42px;color:#555555; font-family: Arial; font-size: 20px;} #obtn .proScreenBox .ulIBox .listLi li a.on, #obtn .proScreenBox .ulIBox .listLi li a:hover{color:#0068b7;} #obtn .proScreenBox .rightIco{position:absolute; width: 15px; height: 15px; line-height: 0; right: 25px; top:30px; cursor: pointer;} #obtn .proScreenBox .rightIco i{float: left; width: 15px; height: 15px; text-align: center; line-height: 15px;} #obtn .proScreenBox .rightIco i img{vertical-align: middle; margin-top: -2px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proScreenBox .ulIBox.on .rightIco i img{ transform:rotateX(180deg); -ms-transform:rotateX(180deg); /* IE 9 */ -moz-transform:rotateX(180deg); /* Firefox */ -webkit-transform:rotateX(180deg); /* Safari 鍜� Chrome */ -o-transform:rotateX(180deg); } #obtn .proScreenBox .ulIBox.on .listLi{height: auto;} @media screen and (max-width:1569px) { #obtn .proScreenBox .ulIBox{padding: 18px 40px 19px 160px} #obtn .proScreenBox .ulIBox .leftTit{font-size: 18px;} #obtn .proScreenBox .ulIBox:after{left: 130px;} #obtn .proScreenBox .ulIBox .listLi li{margin-right: 25px;} #obtn .proScreenBox .ulIBox .listLi li a{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .goBack{margin-top: 30px;} #obtn .goBack a em img{width:45px; height: 45px;} #obtn .goBack a span{line-height: 45px;} #obtn .proScreenBox .ulIBox{padding:15px 30px 15px 130px;} #obtn .proScreenBox .ulIBox .leftTit{top:15px; left: 20px; font-size: 16px;} #obtn .proScreenBox .ulIBox:after{left: 110px; top:28px;} #obtn .proScreenBox .ulIBox .listLi li a{font-size: 16px;} } @media screen and (max-width:767px) { #obtn .goBack{margin-top: 20px;} #obtn .proScreenBox .ulIBox{padding: 10px 20px 10px 100px} #obtn .proScreenBox .ulIBox .leftTit{font-size: 14px;top:10px;} #obtn .proScreenBox .ulIBox:after{left: 85px; top:24px;} #obtn .proScreenBox .ulIBox .listLi li a{font-size: 14px;} #obtn .proScreenBox .rightIco{right: 15px; top:24px;} } #obtn .proScreenList{float: left; width: 100%; margin-top: 12px;} #obtn .proScreenList ul{margin: 0 -15px;} #obtn .proScreenList li{float: left; width: 33.333%; padding: 0 15px; margin-top:30px;} #obtn .proScreenList li a{float: left; width: 100%;} #obtn .proScreenList li a:hover{ box-shadow: 0 0 18px rgba(0,104,183,0.09); -moz-box-shadow: 0 0 18px rgba(0,104,183,0.09); -webkit-box-shadow: 0 0 18px rgba(0,104,183,0.09); } #obtn .proScreenList li a .tImg{float: left; width: 100%; line-height: 0; overflow: hidden;} #obtn .proScreenList li a .tImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proScreenList li a:hover .tImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .proScreenList li a .dText{float: left; width: 100%; background: #fff; padding: 0 30px;} #obtn .proScreenList li a .dText h2{float: left; width: 100%; margin: 18px 0 21px 0; color:#333333; font-size: 20px; line-height: 40px; font-family: Arial; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .proScreenList li a:hover .dText h2{color:#0068b7;} #obtn .proScreenList li a .time{float: left; width: 100%; border-top:1px solid #e9e9e9; padding: 16px 0; color:#888888; font-size: 16px; line-height: 40px; font-family: Arial;} #obtn .proScreenList li a .time img{vertical-align: middle; margin-top: -4px;} @media screen and (max-width:1569px) { #obtn .proScreenList li a .dText{padding: 0 25px;} #obtn .proScreenList li a .dText h2{margin: 15px 0; font-size: 18px;} #obtn .proScreenList li a .time{padding: 12px 0;} } @media screen and (max-width:1229px) { #obtn .proScreenList ul{margin: 0 -10px;} #obtn .proScreenList li{padding: 0 10px; margin-top: 20px;} #obtn .proScreenList li a .dText h2{font-size: 16px; line-height: 35px;} #obtn .proScreenList li a .time{font-size: 14px; line-height: 35px;} } @media screen and (max-width:991px) { #obtn .proScreenList li{width: 50%;} } @media screen and (max-width:767px) { #obtn .proScreenList{margin-top: 5px;} #obtn .proScreenList li{width:100%;} #obtn .proScreenList li a .dText{padding: 0 15px;} } /*11services*/ #obtn .servicesOneBox{float: left; width: 100%; margin: 80px 0;} #obtn .servicesOneBox ul{margin: 0 -15px;} #obtn .servicesOneBox li{float: left; width: 50%; padding: 0 15px;} #obtn .servicesOneBox li .imgBox{float: left; width: 100%; line-height: 0; background: #ffffff; position: relative; cursor: pointer; overflow: hidden;} /*20200928*/ #obtn .servicesOneBox li .imgBox .img{ /*opacity: 0.15;filter:alpha(opacity=15);*/ opacity: 0.36;filter:alpha(opacity=36); transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .servicesOneBox li .imgBox:hover .img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } /*20201203start 修改*/ #obtn .servicesOneBox li .imgBox .serInfo{position: absolute; left: 0; top:0; width: 100%;height: 100%; padding: 56px 40px;} #obtn .servicesOneBox li .imgBox .tIco{float: left; width: 100%; text-align: center; line-height: 0; display: block;} #obtn .servicesOneBox li .imgBox .tIco span{display: inline-block; width: 120px; height: 120px; line-height: 0;} #obtn .servicesOneBox li .imgBox .tIco span img{background: #0068b7; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .servicesOneBox li .imgBox:hover .tIco span img{ transform:rotateY(360deg); -ms-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -o-transform:rotateY(360deg); } #obtn .servicesOneBox li .imgBox h3{ color:#333333; font-size: 24px; line-height: 40px;} #obtn .servicesOneBox li .imgBox .p1{margin-top: 10px; color:#555555; font-size: 18px; line-height: 30px;font-family: Arial;} #obtn .servicesOneBox li .imgBox .p1 span{display: block;} #obtn .servicesOneBox li:hover .imgBox .serInfo{background-color: rgba(0,104,183,0.8);} #obtn .servicesOneBox li:hover h3{color: #fff;} #obtn .servicesOneBox li:hover .p1{color: #fff;} @media screen and (max-width:1569px) { #obtn .servicesOneBox{margin: 80px 0;} #obtn .servicesOneBox li .imgBox .tIco span{width: 100px; height: 100px;} } @media screen and (max-width:1229px) { #obtn .servicesOneBox{margin: 65px 0;} #obtn .servicesOneBox li .imgBox .serInfo{} #obtn .servicesOneBox li .imgBox .tIco span{width: 80px; height: 80px;} #obtn .servicesOneBox li .imgBox h3{font-size: 18px; } #obtn .servicesOneBox li .imgBox .p1{font-size: 16px; line-height: 26px;margin-top: 0;} #obtn .servicesOneBox li .imgBox .p1 span{display: inline;} } @media screen and (max-width:991px) { #obtn .servicesOneBox{margin:40px 0 60px 0;} #obtn .servicesOneBox li{margin-top: 20px;} } @media screen and (max-width:767px) { #obtn .servicesOneBox{margin:25px 0 40px 0;} #obtn .servicesOneBox li{margin-top: 15px;width: 100%;} #obtn .servicesOneBox li .imgBox .tIco span{width: 60px; height: 60px;} #obtn .servicesOneBox li .imgBox h3{font-size: 18px; line-height: 30px;} #obtn .servicesOneBox li .imgBox .p1{line-height: 24px; margin-top: 5px;} /*20201203end*/ } #obtn .serComBg{float: left; width: 100%; background: url("_im_g/ser5.jpg") no-repeat center; background-size: cover; padding: 90px 0 88px 0;} #obtn .serComBg .serTit{float: left; width: 100%; text-align: center; color:#fff; font-size:30px; line-height: 40px;} #obtn .serComBg .serListBox{float: left; width: 100%; margin-top: 41px;} #obtn .serComBg .serListBox ul{float: left; width: 100%;} #obtn .serComBg .serListBox li{float: left; width: 14.285%; background: #f6f6f6; height: 290px; cursor: pointer;} #obtn .serComBg .serListBox li:nth-child(2n){background: #e8ebef;} #obtn .serComBg .serListBox li .tIco{float: left; width: 100%; text-align: center; line-height: 0; margin-top: 53px;} /*20201203start*/ #obtn .serComBg .serListBox li .tIco .wy_picbox{width: 80px;height: 80px;margin: 0 auto;padding: 10px; border-radius: 100%;overflow: hidden;border:1px solid #0068b7;} #obtn .serComBg .serListBox li .tIco .wy_picbox .wy_pic{width: 100%;height: 100%;} #obtn .serComBg .serListBox li .tIco .wy_picbox2{background-color: #0068b7;display: none;} #obtn .serComBg .serListBox li:hover .tIco .wy_picbox1{display: none;} #obtn .serComBg .serListBox li:hover .tIco .wy_picbox2{display: block;} #obtn .serComBg .serListBox li h3{float: left; width: 100%; text-align: center; font-size: 18px; line-height: 22px; font-weight: bold; margin-top: 23px;} #obtn .serComBg .serListBox li .text{float: left; width: 100%; margin-top: 14px; text-align: center; color:#0068b7; font-size: 18px; line-height: 18px; padding: 0 5px;} #obtn .serComBg .serTelBox{float: left; width: 100%; text-align: center; color:#fff; font-weight: 100; font-size: 48px;line-height: 60px; margin-top: 40px;font-weight: lighter;} #obtn .serComBg .serTelBox span{font-size: 20px;color: #ffff;font-weight: lighter;} /*20201203end*/ @media screen and (max-width:1569px) { #obtn .serComBg{padding: 80px 0;} #obtn .serComBg .serListBox li h3{font-size: 16px;} #obtn .serComBg .serListBox li .text{font-size: 16px;} } @media screen and (max-width:1229px) { #obtn .serComBg{padding:65px 0;} #obtn .serComBg .serListBox{margin-top: 30px;} #obtn .serComBg .serTelBox{font-size: 38px; line-height: 50px; margin-top: 30px;} #obtn .serComBg .serListBox li .tIco{margin-top: 45px;} #obtn .serComBg .serListBox li .tIco img{width: 50px; height: 50px;} } @media screen and (max-width:991px) { #obtn .serComBg{padding:60px 0;} #obtn .serComBg .serTit{font-size: 26px; line-height: 35px;} #obtn .serComBg .serListBox li{width: 25%; height: 260px;} #obtn .serComBg .serListBox li:nth-child(5), #obtn .serComBg .serListBox li:nth-child(7){background:#e8ebef;} #obtn .serComBg .serListBox li:nth-child(6){background:#f6f6f6;} #obtn .serComBg .serListBox li .tIco{margin-top: 35px;} #obtn .serComBg .serListBox li h3{margin-top: 20px;} #obtn .serComBg .serTelBox {margin-top: 25px;} /*start修改*/ #obtn .serComBg .serListBox li .tIco .wy_picbox{width: 60px;height: 60px;padding: 5px;} #obtn .serComBg .serTelBox span{font-size: 16px;} /*ned修改*/ } @media screen and (max-width:767px) { #obtn .serComBg{padding:40px 0;} #obtn .serComBg .serTit{font-size: 24px;} #obtn .serComBg .serListBox{margin-top: 20px;} #obtn .serComBg .serListBox li{width: 50%;} #obtn .serComBg .serListBox li:nth-child(3), #obtn .serComBg .serListBox li:nth-child(6){background:#e8ebef;} #obtn .serComBg .serListBox li:nth-child(4), #obtn .serComBg .serListBox li:nth-child(5){background:#f6f6f6;} #obtn .serComBg .serListBox li h3{padding: 0 5px;} #obtn .serComBg .serTelBox{margin-top: 20px; font-size: 32px;} /*20201203start修改*/ #obtn .serComBg .serTelBox span{font-size: 14px;} /*20201203end*/ } #obtn .ServiceImgList{float: left; width: 100%; margin: 96px 0 100px 0;} #obtn .ServiceImgList ul{float: left; width: 100%;} #obtn .ServiceImgList li{float: left; width: 50%;} #obtn .ServiceImgList li a{float: left; width: 100%; line-height: 0; background: #0068b7; position: relative; overflow:hidden;} #obtn .ServiceImgList li a .botImg{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .ServiceImgList li a:hover .botImg{opacity: 0.2;filter:alpha(opacity=20); transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .ServiceImgList li a .textBox{position: absolute; left: 0; top:0; width: 100%; height: 100%; padding: 55px 59px;} #obtn .ServiceImgList li a .textBox h3{float: left; width: 100%; color:#333333; font-size: 24px; line-height: 32px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .ServiceImgList li a .textBox .p2{float: left; width: 100%; color:#555555; font-size: 18px; line-height:28px; margin-top: 4px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .ServiceImgList li a:hover .textBox h3{color:#fff;} #obtn .ServiceImgList li a:hover .textBox .p2{color:#fff;} @media screen and (max-width:1569px) { #obtn .ServiceImgList{ margin: 80px 0 85px 0;} #obtn .ServiceImgList li a .textBox{padding: 50px;} #obtn .ServiceImgList li a .textBox h3{font-size: 22px;} #obtn .ServiceImgList li a .textBox .p2{font-size: 16px;} } @media screen and (max-width:1229px) { #obtn .ServiceImgList{ margin: 65px 0;} #obtn .ServiceImgList li a .textBox{padding:35px;} #obtn .ServiceImgList li a .textBox h3{font-size:18px;} #obtn .ServiceImgList li a .textBox .p2{font-size: 15px;} } @media screen and (max-width:767px) { #obtn .ServiceImgList{ margin:40px 0;} #obtn .ServiceImgList li{width: 100%;} #obtn .ServiceImgList li a .textBox{padding:20px 25px;} #obtn .ServiceImgList li a .textBox h3{font-size: 20px;} #obtn .ServiceImgList li a .textBox .p2{font-size: 14px; line-height: 26px;} } /*12download*/ #obtn .dataDownSecond{float: left; width: 100%; margin-top: 60px;} #obtn .dataDownSecond .leftLevelBox{float: left; margin-top: 16px;} #obtn .dataDownSecond .leftLevelBox li{float: left; margin-right: 21px;} #obtn .dataDownSecond .leftLevelBox li a{float: left; line-height: 33px; font-size:18px; color:#333333; padding: 0 10px;} #obtn .dataDownSecond .leftLevelBox li a.on, #obtn .dataDownSecond .leftLevelBox li a:hover{background: #0068b7; color:#fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #obtn .dataDownSecond .rightSearch{float: right; width:31%; position:relative; height: 65px; padding-right: 150px;} #obtn .dataDownSecond .rightSearch input{float: left; width: 100%; height: 65px; border:1px solid #e4e4e4; text-indent:20px; color:#0068b7; font-size: 18px;} #obtn .dataDownSecond .rightSearch button{position: absolute; right: 0; top:0; background: #0068b7; border:0; width: 150px; height: 65px; line-height: 65px; font-size: 22px; color:#fff;} #obtn .dataDownSecond .rightSearch button:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); } @media screen and (max-width:1569px) { #obtn .dataDownSecond{margin-top: 50px;} #obtn .dataDownSecond .leftLevelBox li{margin-right: 12px;} #obtn .dataDownSecond .leftLevelBox li a{font-size: 16px;} #obtn .dataDownSecond .rightSearch input{font-size: 16px;} #obtn .dataDownSecond .rightSearch button{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .dataDownSecond .leftLevelBox{margin-top: 0;} #obtn .dataDownSecond .rightSearch{width: 100%; margin-top: 20px; height: 50px;} #obtn .dataDownSecond .rightSearch input{height: 50px;} #obtn .dataDownSecond .rightSearch button{height: 50px; line-height: 50px;} } @media screen and (max-width:991px) { #obtn .dataDownSecond{margin-top: 40px;} #obtn .dataDownSecond .leftLevelBox li{margin: 5px 10px 0 0;} #obtn .dataDownSecond .leftLevelBox li a{font-size: 15px; line-height: 30px;} } @media screen and (max-width:767px) { #obtn .dataDownSecond{margin-top:30px;} #obtn .dataDownSecond .rightSearch input{font-size: 15px;} #obtn .dataDownSecond .rightSearch button{font-size: 18px;} } #obtn .DownloadList{float: left; width: 100%;} #obtn .DownloadList li{float: left; width: 100%; margin-top: 30px;} #obtn .DownloadList li a{float: left; width: 100%; background: #f6f6f6; padding: 30px 60px 30px 130px; position: relative} #obtn .DownloadList li a:after{position: absolute; content: ''; width:0; height: 2px; background: #0068b7; bottom: 0; left: 0; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .DownloadList li a:hover:after{width: 100%;} #obtn .DownloadList li a span{position: absolute; width: 70px; height: 70px; top:50%; margin-top: -35px; left: 30px;line-height: 0; background: #fff; border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px; } #obtn .DownloadList li a .downText{float: left; width: 60%; height: 70px; display: table;} #obtn .DownloadList li a .downText .table{display: table-cell; vertical-align: middle;} #obtn .DownloadList li a .downText em{display: block; color:#0068b7; font-size: 14px; line-height: 20px;} #obtn .DownloadList li a .downText .p1{display: block; color:#333333; font-size: 20px;line-height: 26px;} #obtn .DownloadList li a .rightTime{float: right; width: 35%; height: 70px; border-left: 1px solid #c5c5c5} #obtn .DownloadList li a .rightTime .timing{float: left; color:#888888; font-size: 15px; line-height: 70px; margin-left:100px;} #obtn .DownloadList li a .downButton{float: right; color:#888888; font-size:15px; line-height: 70px;} #obtn .DownloadList li a .downButton img{vertical-align: middle; margin-top: -2px;} @media screen and (max-width:1569px) { #obtn .DownloadList li a .rightTime .timing{margin-left: 18%;} #obtn .DownloadList li a .downText .p1{font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .DownloadList li a{padding: 20px 40px 20px 100px} #obtn .DownloadList li a span{left: 15px;} } @media screen and (max-width:991px) { #obtn .DownloadList li{margin-top: 25px;} #obtn .DownloadList li a{padding: 20px 20px 20px 90px} #obtn .DownloadList li a span{width: 60px; height: 60px; margin-top:-30px;} #obtn .DownloadList li a .downText{height: 60px; width: 55%;} #obtn .DownloadList li a .downText .p1{font-size: 16px;} #obtn .DownloadList li a .rightTime{height: 60px; width: 40%;} #obtn .DownloadList li a .rightTime .timing{line-height: 60px; margin-left: 10%; font-size: 14px;} #obtn .DownloadList li a .downButton{line-height: 60px;font-size: 14px;} } @media screen and (max-width:767px) { #obtn .DownloadList li{margin-top: 15px;} #obtn .DownloadList li a{padding: 15px 15px 15px 90px} #obtn .DownloadList li a span{top:15px; margin-top: 0;} #obtn .DownloadList li a .downText{width:100%; height: auto;padding: 8px 0;} #obtn .DownloadList li a .rightTime{width: 100%; border-left:0; border-top:1px solid #c5c5c5; height: 40px;} #obtn .DownloadList li a .rightTime .timing{margin-left: 0; line-height:40px;} #obtn .DownloadList li a .downButton{line-height: 40px;} #obtn .DownloadList li a .downButton img{width: 18px;} } /*13Servo selection*/ #obtn .ServoSelBox{float: left; width: 100%; margin: 31px 0 100px 0;} #obtn .ServoSelScreen{float: left; width: 100%;} #obtn .ServoSelScreen dl{float: left; width: 100%; margin-top: 43px;} #obtn .ServoSelScreen dl dt{float: left;width: 100%; color:#0068b7; font-size: 22px; line-height: 30px; font-weight: bold; padding-bottom: 12px; position: relative} #obtn .ServoSelScreen dl dt span{float: left; padding-right: 20px; background: #fff; position: relative; z-index: 2;} #obtn .ServoSelScreen dl dt:after{position: absolute; content: ''; width: 100%; height: 1px; left: 0; top:15px; background: #e4e4e4} #obtn .ServoSelScreen dl .ddBox{float: left; width: 100%; background: #f6f6f6; margin-top: 2px; padding: 12px 10px 12px 250px; position: relative;} #obtn .ServoSelScreen dl .ddBox:after{position: absolute; content: ''; width: 1px; height:24px;background: #dbdbdb; left: 233px; top:17px;} #obtn .ServoSelScreen dl .ddBox em{position: absolute; left: 30px; color:#333333; font-size: 16px; line-height: 34px; font-family: Arial;} #obtn .ServoSelScreen dl .ddBox a{float: left; margin-left: 30px; color:#333333; font-size: 16px; line-height: 34px;} #obtn .ServoSelScreen dl .ddBox a.on, #obtn .ServoSelScreen dl .ddBox a:hover{color:#0068b7} #obtn .ServoSelList{float: left; width: 100%; margin-top: 70px;} #obtn .ServoSelList .tH1{float: left; width: 100%; color:#333333; font-size: 20px; line-height: 40px;} #obtn .ServoSelList ul{margin: -10px -15px 0 -15px;} #obtn .ServoSelList li{float: left; width: 50%; margin-top: 30px; padding: 0 15px;} #obtn .ServoSelList li a{float: left; width: 100%; padding: 30px; background: #f6f6f6;} #obtn .ServoSelList li a:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.1); } #obtn .ServoSelList li a .lImg{float: left; width: 34%; overflow: hidden} #obtn .ServoSelList li a .lImg img{ transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .ServoSelList li a:hover .lImg img{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .ServoSelList li a .rText{float: left; width:66%; padding-left: 30px;} #obtn .ServoSelList li a .rText h3{float: left; width: 100%; color:#0068b7; font-size: 24px; line-height: 40px; padding-bottom: 17px; border-bottom: 1px solid #dfdfdf} #obtn .ServoSelList li a .rText .p2{float: left; width: 100%; color:#333333; font-size: 16px; line-height: 45px; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; overflow: hidden; } @media screen and (max-width:1569px) { #obtn .ServoSelList{margin-top: 60px} #obtn .ServoSelList li a{padding: 20px;} #obtn .ServoSelList li a .lImg{width: 38%;} #obtn .ServoSelList li a .rText{width: 62%; padding-left: 20px;} #obtn .ServoSelList li a .rText h3{font-size: 20px; padding-bottom: 10px;} #obtn .ServoSelList li a .rText .p2{font-size: 15px; line-height: 35px;} } @media screen and (max-width:1229px) { #obtn .ServoSelBox{margin: 20px 0 70px 0;} #obtn .ServoSelScreen dl{margin-top: 35px;} #obtn .ServoSelScreen dl dt{font-size: 20px;} #obtn .ServoSelScreen dl .ddBox{padding: 12px 10px 12px 220px} #obtn .ServoSelScreen dl .ddBox em{font-size: 15px; left: 20px;} #obtn .ServoSelScreen dl .ddBox a{font-size: 15px; margin-left: 20px;} #obtn .ServoSelScreen dl .ddBox:after{left: 205px;} #obtn .ServoSelList{margin-top: 45px;} #obtn .ServoSelList .tH1{font-size: 18px;} #obtn .ServoSelList ul{margin: -10px -10px 0 -10px} #obtn .ServoSelList li{padding: 0 10px; margin-top: 20px;} #obtn .ServoSelList li a{padding: 15px;} } @media screen and (max-width:991px) { #obtn .ServoSelBox{margin: 20px 0 60px 0;} #obtn .ServoSelScreen dl{margin-top: 30px;} #obtn .ServoSelList li{width: 100%;} #obtn .ServoSelList li a .rText h3{font-size: 18px; line-height: 30px;} } @media screen and (max-width:767px) { #obtn .ServoSelBox{margin: 10px 0 40px 0;} #obtn .ServoSelScreen dl dt{font-size: 18px;} #obtn .ServoSelScreen dl{margin-top: 20px;} #obtn .ServoSelScreen dl .ddBox{padding: 10px;} #obtn .ServoSelScreen dl .ddBox em{float: left; width: 100%; position: static; padding-left:15px;} #obtn .ServoSelScreen dl .ddBox:after{width: 40px; height: 1px; left: 25px; top:44px;} #obtn .ServoSelScreen dl .ddBox a{margin: 5px 0 0 15px;} #obtn .ServoSelList{margin-top: 30px;} #obtn .ServoSelList .tH1{font-size: 16px; line-height: 30px;} #obtn .ServoSelList li{margin-top: 15px;} #obtn .ServoSelList li a .rText{padding-left: 15px;} #obtn .ServoSelList li a .rText .p2{font-size: 14px; line-height:28px;} } /*14online message*/ #obtn .OnlineMessageBox{float: left; width: 100%; margin: 80px 0; background: url("_im_g/ser19.png") no-repeat center; background-size:100% 100%; padding: 77px 110px 96px 110px;} #obtn .OnlineMessageBox .messTit{float: left; width:100%; color:#0068b7; font-size: 48px; line-height: 55px;} #obtn .OnlineMessageBox .messText{float: left; width: 100%; margin-top: 15px; font-size:18px; color:#333333; line-height: 35px;} #obtn .OnlineMessageBox .messText span{color:#0068b7} #obtn .formBox{float: left; width: 100%; margin-top: 14px;} /*20201229start*/ #obtn .formBox dl{float: left; width: 100%; margin-top: 20px;position: relative;z-index: 9;} #obtn .formBox dl:nth-child(1){z-index: 10;} /*20201229end*/ #obtn .formBox dl dt{float: left; width: 20%; line-height: 64px; color:#0068b7; font-size: 20px; font-weight: bold; font-family: Arial;} #obtn .formBox dl .lab{float: left; width: 25%; margin-left: 1.6666%;position:relative;} #obtn .formBox dl .lab .img{ float:left; position:absolute; right:20px; top:50%; margin-top: -3px; width:11px; height:7px;} #obtn .formBox dl .lab .fv0{ float:left; width:100%; height:64px; font-size:18px; line-height:36px; background:#fff; position:relative; cursor:pointer; border:2px solid #e7eff5; font-family: Arial; color:#666666; text-indent: 25px; } #obtn .formBox dl .lab .ul0{ display:none; float:left; width:100%; position:absolute; left:0; top:60px; z-index:999; background:#fff; padding:5px 0;border:1px solid #e7eff5;} #obtn .formBox dl .lab .ul0 li{ float:left; width:100%; color:#333; font-size:16px; line-height:35px; cursor:pointer; padding: 0 20px; font-family: Arial;} #obtn .formBox dl .lab .ul0 li:hover{background: #0068b7; color:#fff;} #obtn .formBox dl .indexBox{float: left; width: 25%; margin-left: 1.6666%;} #obtn .formBox dl .indexBox input{float: left; width: 100%; border:2px solid #e7eff5; height:64px; font-size: 18px; font-family: Arial; text-indent: 25px; color:#333;} #obtn .formBox dl .textareaBox{float: left; width:78.3334%;margin-left: 1.6666%;} #obtn .formBox dl .textareaBox textarea{float: left; width: 100%; border:2px solid #e7eff5; font-family: Arial; font-size: 18px; padding: 15px 25px; height: 97px;} #obtn .formBox .buttonBox{float: right; width: 80%;} #obtn .formBox .buttonBox .indexBox{float:left; width: 39.8%; margin-left: 2%; position: relative} #obtn .formBox .buttonBox .indexBox span{position: absolute; right: 2px; top:2px;line-height: 0; width: 129px; height: 60px;} #obtn .formBox .buttonBox .subBox{float: right; width: 56.48%; } #obtn .formBox .buttonBox .subBox button{float: left; width: 100%;background: #0068b7; border:0;line-height: 64px; color:#fff; font-size:20px; font-family: Arial;} #obtn .formBox .buttonBox .subBox button:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.15); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15); } @media screen and (max-width:1569px) { #obtn .OnlineMessageBox{padding:60px 80px 80px 80px} #obtn .OnlineMessageBox .messTit{font-size: 42px;} #obtn .OnlineMessageBox .messText{line-height: 30px;} #obtn .formBox dl dt{font-size: 18px; line-height: 60px;} #obtn .formBox dl .lab .fv0{height: 60px; text-indent: 15px; font-size: 16px;} #obtn .formBox dl .indexBox input{height: 60px;font-size: 16px; text-indent: 15px;} #obtn .formBox dl .textareaBox textarea{font-size: 16px; padding: 15px;} #obtn .formBox .buttonBox .indexBox span{width: 120px;} #obtn .formBox .buttonBox .indexBox span img{height: 56px;} #obtn .formBox .buttonBox .subBox button{height: 60px; font-size: 18px;} } @media screen and (max-width:1229px) { #obtn .OnlineMessageBox{margin: 65px 0;padding: 50px 60px 60px 60px} #obtn .OnlineMessageBox .messTit{font-size: 36px;} #obtn .OnlineMessageBox .messText{font-size: 16px; line-height: 28px;} #obtn .formBox dl dt{font-size: 16px;} } @media screen and (max-width:991px) { #obtn .OnlineMessageBox{margin:55px 0;padding: 40px 40px 55px 40px;} #obtn .formBox dl{margin-top: 15px;} #obtn .formBox dl dt{width: 100%; line-height: 50px;} #obtn .formBox dl .lab{width: 32%; margin: 0 2% 0 0;} #obtn .formBox dl .indexBox{width: 32%; margin: 0 2% 0 0;} #obtn .formBox dl .indexBox:last-child{margin: 0;} #obtn .formBox dl .lab .ul0{top:50px;} #obtn .formBox dl .lab .fv0{height: 50px;} #obtn .formBox dl .indexBox input{height: 50px;} #obtn .formBox dl .textareaBox{width: 100%; margin-left: 0;} #obtn .formBox .buttonBox{width:100%;} #obtn .formBox .buttonBox .indexBox{margin: 0;width: 41.5%;} #obtn .formBox .buttonBox .indexBox span{width: 99px;height: 46px;} #obtn .formBox .buttonBox .indexBox span img{height: 46px;} #obtn .formBox .buttonBox .subBox button{height: 50px;line-height: 50px;} } @media screen and (max-width:767px) { #obtn .OnlineMessageBox{margin:35px 0 40px 0; padding:0; background: none;} #obtn .OnlineMessageBox .messTit{font-size: 30px; line-height: 45px;} #obtn .OnlineMessageBox .messText{font-size: 15px; line-height: 26px;} #obtn .formBox dl{margin-top:20px;} #obtn .formBox dl:first-child{margin-top: 10px;} #obtn .formBox dl dt{font-size:15px; line-height: 30px;} #obtn .formBox dl .lab{width: 100%; margin: 10px 0 0 0;} #obtn .formBox dl .lab .fv0{font-size: 15px;} #obtn .formBox dl .lab .ul0 li{font-size: 15px;} #obtn .formBox dl .indexBox{width: 100%; margin-top: 10px;} #obtn .formBox dl .indexBox:last-child{margin-top: 10px;} #obtn .formBox dl .indexBox input{font-size: 15px;} #obtn .formBox dl .textareaBox{margin-top: 10px;} #obtn .formBox .buttonBox .indexBox{width: 100%; margin-top: -10px;} #obtn .formBox .buttonBox .subBox{width: 100%; margin-top: 10px;} } /*15video*/ #obtn .videoListBox{float: left; width: 100%; margin-top: 70px;} #obtn .videoListBox ul{margin: 0 -15px;} #obtn .videoListBox li{float: left; width: 50%; padding: 0 15px; margin-top:30px;} #obtn .videoListBox li a{float: left; width: 100%;} #obtn .videoListBox li a .tImg{float: left; width: 100%; line-height: 0; position:relative; background: #000; overflow: hidden;} #obtn .videoListBox li a .tImg .videoImg{opacity: 0.8;filter:alpha(opacity=80); transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .videoListBox li a:hover .tImg .videoImg{ transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); } #obtn .videoListBox li a .tImg span{position: absolute; z-index: 3; width: 86px;height: 86px; left: 50%; margin-left: -43px; top:50%; margin-top: -43px;} #obtn .videoListBox li a .dText{float: left; width: 100%; background: #f4f4f5; padding:0 10px;color:#333333; font-size: 20px; font-family: Arial; height: 79px; line-height: 79px; text-align: center; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .videoListBox li a:hover .dText{ background: #0068b7; color:#fff; } @media screen and (max-width:1569px) { #obtn .videoListBox{margin-top: 50px;} #obtn .videoListBox li a .dText{font-size: 18px; height: 75px; line-height: 75px;} } @media screen and (max-width:1229px) { #obtn .videoListBox{margin-top: 40px;} #obtn .videoListBox li a .dText{font-size: 16px; height: 70px; line-height: 70px;} #obtn .videoListBox li a .tImg span{width: 70px; height: 70px; margin-left: -35px; margin-top: -35px;} } @media screen and (max-width:991px) { #obtn .videoListBox{margin-top:30px;} #obtn .videoListBox ul{margin: 0 -10px;} #obtn .videoListBox li{padding: 0 10px; margin-top: 20px;} #obtn .videoListBox li a .tImg span{width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;} } @media screen and (max-width:767px) { #obtn .videoListBox{margin-top:15px;} #obtn .videoListBox li{width: 100%;} #obtn .videoListBox li a .dText{height: 60px; line-height: 60px; font-size: 14px;} } /*16contact*/ #obtn .contactPageBox{float: left; width: 100%; margin: 60px 0 100px 0;} #obtn .contactPageBox .conTit{float: left; width: 100%; color:#333333; font-size: 24px; line-height: 60px; padding-bottom: 21px; border-bottom: 1px solid #e5e5e5; font-family: Arial; font-weight: bold;} #obtn .contactPageBox .conListAdd{float: left; width: 100%; margin-top: 94px;} #obtn .contactPageBox .conListAdd ul{margin: 0 -15px;} #obtn .contactPageBox .conListAdd li{float: left; width: 25%; padding: 0 15px;} #obtn .contactPageBox .conListAdd li .addBox{float: left; width: 100%; position: relative; background: #f6f6f6; height: 258px; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .contactPageBox .conListAdd li .addBox:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.15); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15); } #obtn .contactPageBox .conListAdd li .addBox .tIco{position: absolute; left: 0; width: 100%; text-align: center; top:-52px; line-height: 0;} #obtn .contactPageBox .conListAdd li .addBox .tIco img{/*background: #0068b7;*/background: rgba(45,45,45,0.4); border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .contactPageBox .conListAdd li .addBox:hover .tIco img { background: #0068b7; /* transform:rotateY(360deg); -ms-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -o-transform:rotateY(360deg);*/ } #obtn .contactPageBox .conListAdd li .addBox h3{float: left; width: 100%; text-align: center; font-family: Arial; color:#333333; font-size: 20px; line-height: 32px; margin-top: 90px;} #obtn .contactPageBox .conListAdd li .addBox .p3{float: left; width: 100%; padding: 0 20px; color:#555555; font-size: 16px; line-height: 20px; margin-top: 15px; text-align: center;} /*20201230start*/ #obtn .conCityForm{float: left; width: 100%; margin-top: 80px;position: relative;z-index: 9;} /*20201230end*/ #obtn .conCityForm .lab{float: left; width:38.47%; margin-right: 1.2738%;position:relative;} #obtn .conCityForm .lab .img{ float:left; position:absolute; right:20px; top:50%; margin-top: -3px; width:11px; height:7px;} #obtn .conCityForm .lab .fv0{ float:left; width:100%; height:65px; font-size:18px; line-height:36px; background:#fff; position:relative; cursor:pointer; border:1px solid #e3e3e3; font-family: Arial; color:#333333; text-indent: 25px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #obtn .conCityForm .lab .ul0{ display:none; float:left; width:100%; position:absolute; left:0; top:64px; z-index:16; background:#fff; padding:5px 0;border:1px solid #e7eff5;} #obtn .conCityForm .lab .ul0 li{ float:left; width:100%; color:#333; font-size:16px; line-height:35px; cursor:pointer; padding: 0 20px; font-family: Arial;} #obtn .conCityForm .lab .ul0 li:hover{background: #0068b7; color:#fff;} #obtn .conCityForm .SearchBox{float: right; width:20.5124%;} #obtn .conCityForm .SearchBox button{float: left; width: 100%; height: 65px; border:0; color:#fff; font-size: 18px; font-family: Arial; text-transform: uppercase; background: #0068b7; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #obtn .conCityForm .SearchBox button:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.15); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15); } /*20201230start*/ #obtn .conCityList{float: left; width: 100%;position: relative;z-index: 8} /*20201230end*/ #obtn .conCityList ul{margin: 0 -15px;} #obtn .conCityList li{float: left; width:50%; padding: 0 15px; margin-top: 30px;} #obtn .conCityList li .conInfo{float: left; width: 100%; background: #f6f6f6; padding: 32px 7.8% 19px 7.8%; height: 278px; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .conCityList li .conInfo .tit{float: left; width: 100%; color:#333333; font-size: 24px; line-height: 40px; padding-bottom: 21px; border-bottom: 1px solid #dbdbdb; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .conCityList li .conInfo .p3{float: left; width: 100%; color:#333333; font-size: 16px; line-height:20px; margin-top: 25px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } #obtn .conCityList li .conInfo:hover{background: #0068b7;} #obtn .conCityList li .conInfo:hover .tit{color:#fff;border-bottom: 1px solid #ffffff; border-color:rgba(255,255,255,0.1);} #obtn .conCityList li .conInfo:hover .p3{color:#fff;} @media screen and (max-width:1569px) { #obtn .contactPageBox{ margin: 50px 0 80px 0;} #obtn .contactPageBox .conListAdd li .addBox .tIco{top:-45px;} #obtn .contactPageBox .conListAdd li .addBox .tIco img{width: 90px; height: 90px;} #obtn .contactPageBox .conListAdd li .addBox h3{font-size: 18px;} #obtn .conCityList li .conInfo .tit{font-size: 22px;} } @media screen and (max-width:1229px) { #obtn .contactPageBox{ margin: 40px 0 70px 0;} #obtn .contactPageBox .conTit{font-size:22px; line-height: 50px;padding-bottom:15px;} #obtn .contactPageBox .conListAdd{margin-top: 80px;} #obtn .contactPageBox .conListAdd ul{margin: 0 -10px;} #obtn .contactPageBox .conListAdd li{padding: 0 10px;} #obtn .contactPageBox .conListAdd li .addBox .tIco{top:-37px;} #obtn .contactPageBox .conListAdd li .addBox .tIco img{width: 74px; height: 74px;} #obtn .contactPageBox .conListAdd li .addBox h3{font-size: 18px; margin-top: 75px;} #obtn .contactPageBox .conListAdd li .addBox .p3{font-size: 14px; margin-top: 10px;} #obtn .conCityForm{margin-top: 60px;} #obtn .conCityList{margin-top: 10px;} #obtn .conCityList ul{margin: 0 -10px;} #obtn .conCityList li{padding: 0 10px; margin-top: 20px;} #obtn .conCityList li .conInfo{padding:25px 6% 20px 6%} #obtn .conCityList li .conInfo .tit{font-size: 20px; padding-bottom: 10px;} #obtn .conCityList li .conInfo .p3{font-size: 15px; margin-top: 20px;} } @media screen and (max-width:991px) { #obtn .contactPageBox .conListAdd{margin-top: 20px;} #obtn .contactPageBox .conListAdd li{width: 50%; margin-top: 55px;} #obtn .conCityForm{margin-top: 40px;} #obtn .conCityForm .lab .fv0{height: 55px; line-height: 55px; font-size: 16px;} #obtn .conCityForm .lab .ul0{top:55px;} #obtn .conCityForm .SearchBox button{height: 55px; font-size: 16px;} #obtn .conCityList li{width: 100%;} #obtn .conCityList li .conInfo{height: auto;} #obtn .conCityList li .conInfo .tit{font-size: 18px;} #obtn .conCityList li .conInfo .p3{font-size: 14px;} } @media screen and (max-width:767px) { #obtn .contactPageBox{margin: 25px 0 40px 0;} #obtn .contactPageBox .conTit{font-size: 18px; padding-bottom: 10px;} #obtn .contactPageBox .conListAdd{margin-top: 0;} #obtn .contactPageBox .conListAdd li{width: 100%;} #obtn .conCityForm{margin-top: 20px;} #obtn .conCityForm .lab{width: 100%; margin-right: 0; margin-top: 10px;} #obtn .conCityForm .SearchBox{width: 100%; margin-top: 10px;} #obtn .conCityList{margin-top: 0;} #obtn .conCityList li .conInfo{padding: 15px 6% 25px 6%} } /*17solutions-details*/ #obtn .timeBox{float: left; width: 100%; margin-top: 15px;} #obtn .timeBox span{display: inline-block; margin-right: 35px; color:#888888; font-size: 18px; line-height:45px; font-family: Arial;} #obtn .timeBox span img{vertical-align: middle;margin-top: -3px;} @media screen and (max-width:1569px) { #obtn .timeBox span{font-size: 16px;} } @media screen and (max-width:1229px) { #obtn .timeBox span{font-size: 15px; line-height: 40px; margin-right: 25px;} } @media screen and (max-width:991px) { #obtn .timeBox span{font-size: 14px; line-height: 30px; margin-right: 20px;} } /*寮曞椤�*/ #obtn .GuidePageBox{position: fixed; width: 100%; height:100%; left: 0; top:0; background: #005ca1; z-index: 9999;} #obtn .WhiteGarden{position: fixed; left: 50%; top:50%; z-index: 999; background: #fff; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } @keyframes widthBox { from {width: 28px; height: 28px; left: 50%;top:50%;margin-left:-14px; margin-top:-14px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } to {width:200%; height:200%;left:-50%;top:-50%;margin-left:0; margin-top:0; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; } } @-moz-keyframes widthBox /* Firefox */ { from {width: 28px; height: 28px; left: 50%;top:50%;margin-left:-14px; margin-top:-14px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } to {width:200%; height:200%;left:-50%;top:-50%;margin-left:0; margin-top:0; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; } } @-webkit-keyframes widthBox /* Safari 鍜� Chrome */ { from {width: 28px; height: 28px; left: 50%;top:50%;margin-left:-14px; margin-top:-14px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } to {width:200%; height:200%;left:-50%;top:-50%;margin-left:0; margin-top:0; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; } } @-o-keyframes widthBox /* Opera */ { from {width: 28px; height: 28px; left: 50%;top:50%;margin-left:-14px; margin-top:-14px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } to {width:200%; height:200%;left:-50%;top:-50%;margin-left:0; margin-top:0; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; } } #obtn .WhiteGarden { left: 0; top:0; animation: widthBox 1.5s; -moz-animation: widthBox 1.5s; /* Firefox */ -webkit-animation: widthBox 1.5s; /* Safari 鍜� Chrome */ -o-animation: widthBox 1.5s; animation-fill-mode:forwards; background: #fff; } #obtn .guideLogo{position: fixed; z-index:9999; width:180px; height: 45px; top:50%; margin-top: -22.5px;opacity: 0;} @keyframes leftLogo { from {left: 0; margin-left: -90px; opacity: 0;filter:alpha(opacity=0);} to {left: 50%; margin-left: -90px;opacity: 1;filter:alpha(opacity=100);} } @-moz-keyframes leftLogo /* Firefox */ { from {left: 0; margin-left: -90px; opacity: 0;filter:alpha(opacity=0);} to {left: 50%; margin-left: -90px;opacity: 1;filter:alpha(opacity=100);} } @-webkit-keyframes leftLogo /* Safari 鍜� Chrome */ { from {left: 0; margin-left: -90px; opacity: 0;filter:alpha(opacity=0);} to {left: 50%; margin-left: -90px;opacity: 1;filter:alpha(opacity=100);} } @-o-keyframes leftLogo /* Opera */ { from {left: 0; margin-left: -90px; opacity: 0;filter:alpha(opacity=0);} to {left: 50%; margin-left: -90px;opacity: 1;filter:alpha(opacity=100);} } #obtn .guideLogo { animation: leftLogo 2s; -moz-animation: leftLogo 2s; /* Firefox */ -webkit-animation: leftLogo 2s; /* Safari 鍜� Chrome */ -o-animation: leftLogo 2s; animation-fill-mode:forwards; opacity: 1;filter:alpha(opacity=100); } #obtn .bgBox{position: fixed; z-index:9999;left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box; border-style: solid; border-color: rgba(0, 0, 0, .6); border-left-width: 500px; border-bottom-width:500px; border-top-width: 500px; border-right-width: 500px; } @-moz-keyframes leftLogo /* Firefox */ { from {border-left-width: 500px; border-bottom-width:500px; border-top-width: 500px; border-right-width: 500px;} to {border-left-width: 0; border-bottom-width:0; border-top-width: 0; border-right-width:0;} } @-webkit-keyframes leftLogo /* Safari 鍜� Chrome */ { from {border-left-width: 500px; border-bottom-width:500px; border-top-width: 500px; border-right-width: 500px;} to {border-left-width: 0; border-bottom-width:0; border-top-width: 0; border-right-width:0;} } @-o-keyframes leftLogo /* Opera */ { from {border-left-width: 500px; border-bottom-width:500px; border-top-width: 500px; border-right-width: 500px;} to {border-left-width: 0; border-bottom-width:0; border-top-width: 0; border-right-width:0;} } #new #top { background-size: cover; } #new #top .title { z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; font-size: 28px; margin-bottom: 0.3rem; } #new #top .rowMain { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } #new #top .rowMain .wrap { max-width: 100%; position: relative; width: 100%; padding-bottom: 40%; min-height: 480px; } #new #top .rowMain .wrap > .bg { width: 50%; visibility: hidden; opacity: 0; pointer-events: none; } #new #top .rowMain .wrap .itemwrap { position: absolute; width: 100%; top: 0; left: 0; height: 100%; } #new #top .rowMain .wrap .itemwrap .box { display: flex; height: 100%; align-items: stretch; top: 0; left: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; z-index: 999; } #new #top .rowMain .wrap .itemwrap .box > a { display: flex; height: 100%; align-items: stretch; top: 0; left: 0; position: absolute; width: 100%; pointer-events: none; z-index: 999; } #new #top .rowMain .wrap .itemwrap .box .col { width: 55%; background-color: #fff; position: relative; } #new #top .rowMain .wrap .itemwrap .box .col .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #new #top .rowMain .wrap .itemwrap .box .col:nth-of-type(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 45%; padding: 0.4rem 0.6rem; background: url("img/bg1.png") bottom right no-repeat #ffffff; background-size: 50%; } #new #top .rowMain .wrap .itemwrap .box .col .msg { max-width: 100%; } #new #top .rowMain .wrap .itemwrap .box .col .msg .topic { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0.3rem; } #new #top .rowMain .wrap .itemwrap .box .col .msg .topic > span:nth-of-type(1) { font-size: 80px; margin-right: 14px; line-height: 80px; border-bottom: 3px solid #d70c18; } #new #top .rowMain .wrap .itemwrap .box .col .msg .topic > span:nth-of-type(2) { margin-bottom: 7px; } #new #top .rowMain .wrap .itemwrap .box .col .msg .topic > span:nth-of-type(2) > em { font-size: 16px; line-height: 1; font-style: normal; display: block; } #new #top .rowMain .wrap .itemwrap .box .col .msg .topic > span:nth-of-type(2) > small { font-size: 16px; line-height: 1; } #new #top .rowMain .wrap .itemwrap .box .col .msg .mid h2, #new #top .rowMain .wrap .itemwrap .box .col .msg .mid span, #new #top .rowMain .wrap .itemwrap .box .col .msg .mid p { max-width: 100%; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #new #top .rowMain .wrap .itemwrap .box .col .msg .other { text-align: right; } #new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more { color: #000; position: relative; display: inline-block; padding-left: 30px; height: 40px; line-height: 40px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; } #new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more .arrow { font-size: 12px; vertical-align: top; margin-left: 10px; } #new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover { color: #d70c18; } #new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover .arrow { border-color: transparent transparent transparent #d70c18; } #new #top .rowMain .wrap .itemwrap .box.on { opacity: 1; box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); pointer-events: auto; z-index: 900; } #new #top .rowMain .wrap .itemwrap .box:hover h2 { color: #d70c18; } #new #top .rowMain .wrap .itemwrap .box:hover .col .other .go-more { color: #d70c18; } #new #top .rowMain .wrap .itemwrap .box:hover .col .other .go-more .arrow { border-color: transparent transparent transparent #d70c18; } #new #top .rowMain .wrap .pager { float:right; position:absolute; margin-top:45px; top: 100%; right:0; width:auto; display: flex; justify-content: flex-end; align-items: center; } #new #top .rowMain .wrap .pager .p-prev { width: 55px; float:left; height: 55px; background:url(_im_g/m20-1.png) center no-repeat #cccccc; background-size:20px auto; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; cursor: pointer; } #new #top .rowMain .wrap .pager .p-prev:hover { background-color: #005ca1; } #new #top .rowMain .wrap .pager .p-next { width: 55px; float:left; height: 55px; background:url(_im_g/m20-2.png) center no-repeat #cccccc; background-size:20px auto; margin-left: 10px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; cursor: pointer; } #new #top .rowMain .wrap .pager .p-next:hover { background-color: #005ca1; } .bloc { float:left; width:100%;position: relative;min-height: 100%; padding-bottom:120px;} .bloc .wrapper { float:left; width:100%; height:100%;} .bloc .wrapper .row { height: 100vh; background-color: #fff; position: absolute; width: 100vw; top: 0; left: 0; z-index: 3; opacity: 0; overflow: hidden; } .bloc .wrapper .row.on { z-index: 4; opacity: 1; } .bloc .wrapper .row.navInPrev { pointer-events: none; opacity: 1; -webkit-animation: slideInHalfFromTop 0.7s forwards ease-in-out; animation: slideInHalfFromTop 0.7s forwards ease-in-out; } .bloc .wrapper .row.navOutPrev { pointer-events: none; opacity: 1; -webkit-animation: slideOutBottom 0.7s forwards ease-in-out; animation: slideOutBottom 0.7s forwards ease-in-out; } .bloc .wrapper .row.navInNext { pointer-events: none; opacity: 1; z-index: 100; -webkit-animation: slideInFromBottom 0.7s forwards ease-in-out; animation: slideInFromBottom 0.7s forwards ease-in-out; } .bloc .wrapper .row.navOutNext { pointer-events: none; opacity: 1; -webkit-animation: slideOutHalfTop 0.7s forwards ease-in-out; animation: slideOutHalfTop 0.7s forwards ease-in-out; } .bloc .wrapper .claNext { z-index: 4; opacity: 1; transform: translateY(85%); animation: mhover .5s ease 1; } @media screen and (max-width:1229px) { #new #top .rowMain .wrap{ min-height:352px; padding-bottom:36.5%;} } @media screen and (max-width:991px) { .bloc{ padding-bottom:75px;} #new #top .rowMain .wrap{ min-height:239px; padding-bottom:32.5%;} #new #top .rowMain .wrap .pager{ margin-top:20px;} #new #top .rowMain .wrap .pager .p-prev{ width:36px; height:36px; background-size:12px auto;} #new #top .rowMain .wrap .pager .p-next{ width:36px; height:36px; background-size:12px auto;} } @media screen and (max-width:767px) { #new #top .rowMain{display: block; height: auto;} #new #top .rowMain .wrap{min-height:500px; padding-bottom:35%;} #new #top .rowMain .wrap .itemwrap .box > a{display: block;} } @media screen and (max-width:374px) { #new #top .rowMain .wrap{min-height:450px; padding-bottom:35%;} } /*加入我们*/ #obtn .jiaru1{ float:left; width:100%; background:#f8f8f8; padding:100px 0 100px 0;} #obtn .share{ float:left; width:100%; margin-bottom:30px; position:relative; z-index:88; } #obtn .share .so1{ float:left; width:38.47%; margin-right:1.27%; position:relative; z-index:6;} #obtn .share .so1:after{ float:left; width:0; height:0; position:absolute; right:30px; top:50%; content:''; border-left: 6px solid transparent; border-right:6px solid transparent;border-top:7px solid #d3d3d3; margin-top:-3px; } #obtn .share .so2{ float:left; width:38.61%; margin-right:1.27%; position:relative; z-index:5;} #obtn .share .so2:after{ float:left; width:0; height:0; position:absolute; right:30px; top:50%; content:''; border-left: 6px solid transparent; border-right:6px solid transparent;border-top:7px solid #d3d3d3; margin-top:-3px; } #obtn .share .so3{ float:right; width:20.38%; } #obtn .share .fv1{ float:left; width:100%; border:1px solid #e3e3e3; border-radius:3px; background:#fff; color:#333333; font-size:18px; line-height:63px; height:65px; padding:0 30px; outline:none; cursor:pointer;} #obtn .share .fv2{ float:left; width:100%; border:none; border-radius:3px; background:#0068b7; color:#fff; font-size:18px; line-height:65px; cursor:pointer;} #obtn .share ul{ display:none; float:left; width:100%; position:absolute; left:0; z-index:10; top:100%; background:rgba(0,0,0,0.8); border-radius:3px; padding:14px 0; } #obtn .share ul li{ float:left; width:100%; color:#ffffff; font-size:16px; line-height:35px; padding:0 47px; margin:6px 0; cursor:pointer; } #obtn .share ul li:hover{ background:rgba(146,201,229,0.8);} #obtn .jiaru1 ul{ float:left; width:100%; } #obtn .jiaru1 ul{ float:left; width:100%; } #obtn .jiaru1 ul li{ float:left; width:100%; margin-top:1px; position:relative; z-index:6; } #obtn .jiaru1 ul li .info1{ float:left; width:100%; padding:36px 60px; background:#fff; position:relative;} #obtn .jiaru1 ul li .info1 .l1{ float:left; width:100%; color:#333333; font-size:18px; line-height:28px; padding-right:100px; padding-left:24px; position:relative; z-index:8;} #obtn .jiaru1 ul li .info1 .l1:after{ float:left; width:5px; height:22px; position:absolute; left:0; top:3px; content:''; background:#0068b7;} #obtn .jiaru1 ul li .info1 .l2{ float:left; width:100%; color:#333333; font-size:16px; line-height:26px; margin-top:30px; padding-right:100px; position:relative; z-index:8; } #obtn .jiaru1 ul li .info1 .l2 .p1{ float:left; width:22.5%; padding-left:24px;} #obtn .jiaru1 ul li .info1 .l2 .sp{ color:#888888;} #obtn .jiaru1 ul li .info1 .l3{ float:left; position:absolute; z-index:8; right:84px; top:50%; margin-top:-13px; color:#fff; font-size:16px; line-height:26px;-webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;} #obtn .jiaru1 ul li .info1 .l3:after{ float:left; width:0; height:0; position:absolute; left:100%; margin-left:14px; top:50%; margin-top:-8px; content:''; border-top: 8px solid transparent; border-bottom:8px solid transparent;border-left: 11px solid #454545; webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #obtn .jiaru1 ul li .info2{ display:none; float:left; width:100%; background:#fff; padding:0 84px; letter-spacing:1px; color:#666666; font-size:16px; line-height:30px; position:relative; z-index:8; } #obtn .jiaru1 ul li .info2 .line1{ float:left; width:100%; padding:36px 0; border-top:1px solid #e1e1e1; } #obtn .jiaru1 ul li .info2 .p1{ float:left; width:100%; font-weight:bold; color:#333333; font-size:18px; line-height:32px;} #obtn .jiaru1 ul li .info2 .p2{ float:left; width:100%; margin:26px 0 58px 0; } #obtn .jiaru1 ul li:nth-child(2n) .info1{ background:#f8f8f8;} #obtn .jiaru1 ul li:nth-child(2n) .info1 .l3{ color:#f8f8f8;} #obtn .jiaru1 ul li.active .info1{ background:#fff;} #obtn .jiaru1 ul li.active .info1 .l3{ color:#666666;} #obtn .jiaru1 ul li.active .info1 .l3:after{ transform:rotate(90deg);} #obtn .jiaru1 ul li.active{ box-shadow:0 0 38px rgba(0,0,0,0.1); z-index:8;} #obtn .jiaru1 ul li.active .info1{ background:#fff;} @media screen and (max-width:1600px ) { } @media screen and (max-width:1229px ){ #obtn .jiaru1 ul li .info1{ padding:30px 40px;} #obtn .jiaru1 ul li .info1 .l1{ font-size:16px; line-height:26px; padding-left:15px;} #obtn .jiaru1 ul li .info1 .l2{ font-size:14px; line-height:24px; margin-top:15px;} #obtn .jiaru1 ul li .info1 .l2 .p1{ padding-left:15px;} #obtn .jiaru1 ul li .info1 .l3{ right:40px;} #obtn .jiaru1 ul li .info2{ padding:0 55px;} } @media screen and (max-width:1023px ){ #obtn .jiaru1{ padding:40px 0 40px 0;} #obtn .share .fv1{ font-size:14px; line-height:38px; height:40px; padding:0 12px;} #obtn .share .fv2{ font-size:14px; line-height:40px;} #obtn .share ul{ padding:7px 0; } #obtn .share ul li{ font-size:14px; line-height:32px; padding:0 10px; margin:1px 0;} #obtn .jiaru1 ul li .info1{ padding:15px 15px;} #obtn .jiaru1 ul li .info1 .l1{ padding-right:85px;} #obtn .jiaru1 ul li .info1 .l1:after{ width:3px; height:20px;} #obtn .jiaru1 ul li .info1 .l2{ padding-right:85px; margin-top:8px;} #obtn .jiaru1 ul li .info1 .l2 .p1{ width:50%;} #obtn .jiaru1 ul li .info1 .l3{ font-size:14px;} #obtn .jiaru1 ul li .info1 .l3:after{ margin-left:10px; margin-top:-6px; content:''; border-top: 6px solid transparent; border-bottom:6px solid transparent;border-left:8px solid #454545; } #obtn .jiaru1 ul li .info2{ padding:0 25px; font-size:14px; line-height:26px;} #obtn .jiaru1 ul li .info2 .line1{ padding:18px 0;} #obtn .jiaru1 ul li .info2 .p1{ font-size:16px; line-height:28px;} #obtn .jiaru1 ul li .info2 .p2{ margin:10px 0 20px 0; } } @media screen and (max-width:767px ) { #obtn .jiaru1 ul li .info1 .l2 .p1{ width:100%;} } /* #005ca1 @media screen and (max-width:1569px) {} @media screen and (max-width:1229px) {} @media screen and (max-width:991px) {} @media screen and (max-width:767px) {} */ /*20201203start修改*/ #obtn .wy_content{width: 100%;padding-top: 80px;} #obtn .wy_content .wy_top{width: 100%;overflow: hidden;} #obtn .wy_content .wy_top .input{width: 38.38%;float: left;height: 64px;border:1px solid #e3e3e3;border-radius: 6px;padding: 0 24px;margin-left: 0.8833333333333333%;} #obtn .wy_content .wy_top .input input{width: 100%;height: 100%;} #obtn .wy_content .wy_top .type{width: 38.38%;float: left;height: 64px;border:1px solid #e3e3e3;border-radius: 6px;margin-left: 0.8833333333333333%;position: relative;} #obtn .wy_content .wy_top .type .jt{width: 11px;height: 7px;position: absolute;right: 30px;top: 50%; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%);} #obtn .wy_content .wy_top .type select{width: 100%;height: 100%;border:none;padding-left: 24px;padding-right: 20px;padding-right: 50px; outline: none; appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none;} #obtn .wy_content .wy_top .type select::-ms-expand { display: none;} #obtn .wy_content .wy_top .button{width: 20.59%;float: left;height: 64px;border-radius: 6px;overflow: hidden;margin-left: 0.8833333333333333%;} #obtn .wy_content .wy_top .button button{width: 100%;height: 100%; background-color: #0068b7;font-size: 18px;color: #ffffff;} #obtn .wy_content .wy_bottom{width: 100%;margin-top: 30px;border:1px solid #e4e4e4;} #obtn .wy_content .wy_bottom .typebox{width: 100%;overflow: hidden;} #obtn .wy_content .wy_bottom .typebox li{cursor: pointer; width: 25%;float: left;height: 52px;background-color: #d9e7f1;text-align: center;line-height: 52px;font-size: 18px;color: #0068b7;border-right: 1px solid #fff;} #obtn .wy_content .wy_bottom .typebox li a{width:100%;float: left;text-align: center; line-height: 52px;font-size: 18px;color: #0068b7;} #obtn .wy_content .wy_bottom .typebox li:hover,#obtn .wy_content .wy_bottom .typebox li.on{background-color: #0068b7;color: #fff;} #obtn .wy_content .wy_bottom .typebox li:hover a{color: #fff;} #obtn .wy_content .wy_bottom .typebox li.on a{color: #fff;} #obtn .wy_content .wy_bottom .wy_cots{width: 100%;} #obtn .wy_content .wy_bottom .wy_cots ul{width: 100%;padding: 16px 32px;} #obtn .wy_content .wy_bottom .wy_cots ul li{border-bottom: 1px solid #e4e4e4;padding: 20px 0;font-size: 0;cursor: pointer;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1{width: 7.027%;display: inline-block;vertical-align: middle;font-size: 14px; position: relative;padding: 0 2px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .shu{font-size: 16px;position: absolute;right: 0;top:45%;color: #bdbdbd; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%);} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .icon{width: 13px;height: 15px;display: inline-block;vertical-align: middle;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .icon2{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .words{font-size: 14px;color: #888888;display: inline-block;vertical-align: middle;} #obtn .wy_content .wy_bottom .wy_cots ul li .v2{width: 44.52%;display: inline-block;vertical-align: middle;font-size: 14px;color: #333333;padding: 0 2px;padding-left: 21px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v3{width: 15.67%;display: inline-block;vertical-align: middle;font-size: 14px;color: #333333;padding: 0 2px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v4{width: 16.08%;display: inline-block;vertical-align: middle;font-size: 14px; color: #333333;padding: 0 2px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5{width: 5%;display: inline-block;vertical-align: middle;position: relative;text-align: center;padding: 0 2px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .box{width: 14px;height: 14px;margin: 0 auto;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .box2{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi{width: 153px;height: 193px;background: url(images/img15.png)no-repeat center center;background-size: cover;padding: 23px 15px 0 15px;position: absolute;left: 50%;z-index: 99;display: none; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); top: -moz-calc(100% + 9px); top: -o-calc(100% + 9px); top: -webkit-calc(100% + 9px); top: calc(100% + 9px);} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi .ewms{width: 120px;height: 120px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi .words{font-size: 16px;color: #333333;margin-top: 13px; text-align: center;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5:hover .posi{display: block;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6{width: 11.41%;display: inline-block;vertical-align: middle;font-size: 14px; text-align: right;padding: 0 2px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6 .icon{width: 12px;height: 14px;display: inline-block;vertical-align: middle;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6 .icon2{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6 .words{font-size: 14px;color: #888888;display: inline-block;vertical-align: middle;margin-left: 4px;} #obtn .wy_content .wy_bottom .wy_cots ul li:last-child{border-bottom: none;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover{background-color: #0068b7;border-bottom: none;padding-left: 20px;padding-right: 20px;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v1 .icon1{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v1 .icon2{display: inline-block;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v1 .words{color: #fff;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v1 .shu{color: #91bce4;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v2,#obtn .wy_content .wy_bottom .wy_cots ul li:hover .v3,#obtn .wy_content .wy_bottom .wy_cots ul li:hover .v4{color: #fff;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v5 .box1{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v5 .box2{display: inline-block;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v6 .icon1{display: none;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v6 .icon2{display: inline-block;} #obtn .wy_content .wy_bottom .wy_cots ul li:hover .v6 .words{color: #fff;} @media screen and (max-width: 1400px){ @media screen and (max-width: 1199px){ } @media screen and (max-width: 991px){ #obtn .wy_content{padding-top: 20px;} #obtn .wy_content .wy_top .input{height: 35px;padding: 0 12px;} #obtn .wy_content .wy_top .type{height: 35px;} #obtn .wy_content .wy_top .type .jt{right: 20px;} #obtn .wy_content .wy_top .type select{padding-left: 12px;padding-right: 40px;} #obtn .wy_content .wy_top .button{height: 35px;} #obtn .wy_content .wy_top .button button{font-size: 16px;} #obtn .wy_content .wy_bottom{margin-top: 18px;} #obtn .wy_content .wy_bottom .typebox li{height: 32px;line-height: 32px;font-size: 16px;} #obtn .wy_content .wy_bottom .wy_cots ul{padding: 10px 14px;} #obtn .wy_content .wy_bottom .wy_cots ul li{padding: 12px 0;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1{width: 10%;padding-right: 10px;text-align: center;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .icon{width: 12px;height: 14px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1 .words{font-size: 12px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v2{width: 40%;font-size: 12px;padding-left: 10px;padding-right: 10px;text-align: center;} #obtn .wy_content .wy_bottom .wy_cots ul li .v3{font-size: 12px;padding: 0 5px;text-align: center;} #obtn .wy_content .wy_bottom .wy_cots ul li .v4{font-size: 12px;text-align: center; padding: 0 5px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .box{width: 12px;height: 12px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi{width: 130px;height: 170px;padding: 23px 15px 0 15px; top: -moz-calc(100% + 5px); top: -o-calc(100% + 5px); top: -webkit-calc(100% + 5px); top: calc(100% + 5px);} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi .ewms{width: 100px;height: 100px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5 .posi .words{font-size: 14px;margin-top: 10px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6 .icon{width: 10px;height: 12px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6 .words{font-size: 12px;} } @media screen and (max-width: 767px){ #obtn .wy_content{padding-top: 18px;} #obtn .wy_content .wy_top .input{height: 30px;padding: 0 10px;} #obtn .wy_content .wy_top .input input{font-size: 12px;} #obtn .wy_content .wy_top .type{height: 30px;} #obtn .wy_content .wy_top .type .jt{right: 20px;} #obtn .wy_content .wy_top .type select{padding-left: 10px;font-size: 12px;padding-right: 35px;} #obtn .wy_content .wy_top .button{height: 30px;} #obtn .wy_content .wy_top .button button{font-size: 14px;} #obtn .wy_content .wy_bottom{margin-top: 14px;} #obtn .wy_content .wy_bottom .typebox li{height: 30px;line-height: 30px;font-size: 14px;} #obtn .wy_content .wy_bottom .wy_cots ul{padding: 8px;} #obtn .wy_content .wy_bottom .wy_cots ul li{padding: 10px 0;} #obtn .wy_content .wy_bottom .wy_cots ul li .v1{width: 25%;padding-right: 10px;text-align: center;} #obtn .wy_content .wy_bottom .wy_cots ul li .v2{width: 50%;} #obtn .wy_content .wy_bottom .wy_cots ul li .v3{width: 25%;} #obtn .wy_content .wy_bottom .wy_cots ul li .v4{width: 33.33333%;margin-top: 15px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v5{width: 33.33333%;margin-top: 15px;} #obtn .wy_content .wy_bottom .wy_cots ul li .v6{width: 33.3333%;margin-top: 15px;} } /*20201203end*/ .animated { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); -ms-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -ms-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); -ms-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); -ms-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -ms-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); -ms-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fxPushReveal .navOutNext { opacity: 1; -webkit-animation: slideOutBottom 0.7s forwards ease-in-out; animation: slideOutBottom 0.7s forwards ease-in-out; } .fxPushReveal .navInNext { opacity: 1; -webkit-animation: slideInHalfFromTop 0.7s forwards ease-in-out; animation: slideInHalfFromTop 0.7s forwards ease-in-out; } .fxPushReveal .navOutPrev { opacity: 1; -webkit-animation: slideOutHalfTop 0.7s forwards ease-in-out; animation: slideOutHalfTop 0.7s forwards ease-in-out; } .fxPushReveal .navInPrev { opacity: 1; z-index: 1001; -webkit-animation: slideInFromBottom 0.7s forwards ease-in-out; animation: slideInFromBottom 0.7s forwards ease-in-out; } @-webkit-keyframes slideOutBottom { to { -webkit-transform: translateY(100%); } } @keyframes slideOutBottom { to { transform: translateY(100%); } } @-webkit-keyframes slideInHalfFromTop { from { -webkit-transform: translateY(-50%); } to { -webkit-transform: translateY(0); } } @keyframes slideInHalfFromTop { from { transform: translateY(-50%); } to { transform: translateY(0); } } @-webkit-keyframes slideOutHalfTop { to { -webkit-transform: translateY(-50%); } } @keyframes slideOutHalfTop { to { transform: translateY(-50%); filter:blur(2px); -webkit-filter:blur(2px); -moz-filter:blur(2px); -ms-filter:blur(2px); -o-filter:blur(2px); } } @-webkit-keyframes slideInFromBottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @keyframes slideInFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } } .fxSoftPulse .navOutPrev, .fxSoftPulse .navOutNext { -webkit-animation: scaleUpFadeOut 0.8s forwards ease-in; animation: scaleUpFadeOut 0.8s forwards ease-in; } .fxSoftPulse .navInPrev, .fxSoftPulse .navInNext { -webkit-animation: scaleDownFadeIn 0.8s forwards ease-out; animation: scaleDownFadeIn 0.8s forwards ease-out; } @-webkit-keyframes scaleUpFadeOut { 50% { -webkit-transform: scale(1.2); opacity: 1; } 75% { -webkit-transform: scale(1.1); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes scaleUpFadeOut { 50% { transform: scale(1.2); opacity: 1; } 75% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @-webkit-keyframes scaleDownFadeIn { 50% { opacity: 1; -webkit-transform: scale(1.2); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes scaleDownFadeIn { 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .fxEarthquake .navOutNext { opacity: 1; -webkit-animation: shakeSlideBottom 1s 0.1s forwards; animation: shakeSlideBottom 1s 0.1s forwards; } .fxEarthquake .navInNext { -webkit-animation: pushFromTop 1s 0.1s forwards; animation: pushFromTop 1s 0.1s forwards; } .fxEarthquake .navOutPrev { opacity: 1; -webkit-animation: shakeSlideTop 1s 0.1s forwards; animation: shakeSlideTop 1s 0.1s forwards; } .fxEarthquake .navInPrev{ opacity: 1; -webkit-animation: pushFromBottom 1s 0.1s forwards; animation: pushFromBottom 1s 0.1s forwards; } .fxEarthquake li::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; background-color: rgba(0,0,0,0.3); -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .fxEarthquake .navOutPrev::after, .fxEarthquake .navOutNext::after { opacity: 1; } @-webkit-keyframes shakeSlideBottom { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 2% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 4% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 6% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 8% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 10% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 12% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 18% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 20% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 22% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 26% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 32% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 34% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 36% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 38% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 44% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 46% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 48% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 54% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 56% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 58% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 60% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 62% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 66% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 100% { -webkit-transform: translateY(100%); } } @keyframes shakeSlideBottom { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-1px, -1px) rotate(-0.5deg); } 4% { transform: translate(-1px, -1px) rotate(-0.5deg); } 6% { transform: translate(0px, 0px) rotate(-0.5deg); } 8% { transform: translate(-1px, -1px) rotate(-0.5deg); } 10% { transform: translate(-1px, -1px) rotate(-0.5deg); } 12% { transform: translate(0px, 0px) rotate(-0.5deg); } 14% { transform: translate(-1px, -1px) rotate(-0.5deg); } 16% { transform: translate(0px, 0px) rotate(-0.5deg); } 18% { transform: translate(0px, -1px) rotate(-0.5deg); } 20% { transform: translate(0px, -1px) rotate(-0.5deg); } 22% { transform: translate(0px, -1px) rotate(-0.5deg); } 24% { transform: translate(-1px, 0px) rotate(-0.5deg); } 26% { transform: translate(0px, 0px) rotate(-0.5deg); } 28% { transform: translate(-1px, 0px) rotate(-0.5deg); } 30% { transform: translate(0px, -1px) rotate(-0.5deg); } 32% { transform: translate(-1px, 0px) rotate(-0.5deg); } 34% { transform: translate(0px, -1px) rotate(-0.5deg); } 36% { transform: translate(0px, 0px) rotate(-0.5deg); } 38% { transform: translate(-1px, -1px) rotate(-0.5deg); } 40% { transform: translate(0px, 0px) rotate(-0.5deg); } 42% { transform: translate(-1px, 0px) rotate(-0.5deg); } 44% { transform: translate(0px, -1px) rotate(-0.5deg); } 46% { transform: translate(-1px, -1px) rotate(-0.5deg); } 48% { transform: translate(-1px, -1px) rotate(-0.5deg); } 50% { transform: translate(0px, -1px) rotate(-0.5deg); } 52% { transform: translate(-1px, 0px) rotate(-0.5deg); } 54% { transform: translate(0px, -1px) rotate(-0.5deg); } 56% { transform: translate(-1px, -1px) rotate(-0.5deg); } 58% { transform: translate(0px, 0px) rotate(-0.5deg); } 60% { transform: translate(-1px, 0px) rotate(-0.5deg); } 62% { transform: translate(-1px, -1px) rotate(-0.5deg); } 64% { transform: translate(0px, -1px) rotate(-0.5deg); } 66% { transform: translate(-1px, -1px) rotate(-0.5deg); } 68% { transform: translate(-1px, 0px) rotate(-0.5deg); } 70% { transform: translate(0px, 0px) rotate(-0.5deg); } 100% { transform: translateY(100%); } } .fx3dReverse .itemwrap{ perspective : 1600px; } .fx3dReverse .navOutNext { -webkit-animation: reverseOutNext 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: reverseOutNext 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fx3dReverse .navInNext { -webkit-animation: reverseInNext 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: reverseInNext 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); z-index: 1000; } .fx3dReverse .navOutPrev { -webkit-animation: reverseOutPrev 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: reverseOutPrev 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fx3dReverse .navInPrev { -webkit-animation: reverseInPrev 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: reverseInPrev 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } @media screen and (max-width: 800px){ .fx3dReverse .navInNext,.fx3dReverse .navInPrev{ -webkit-animation: fn1_1 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fn1_1 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); z-index: 1000; } .fx3dReverse .navOutPrev,.fx3dReverse .navOutNext{ -webkit-animation: fn1_2 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fn1_2 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } } @keyframes reverseOutNext { 0%{ -webkit-transform: translateY(0) translateZ(0px) rotateX(0deg); opacity: 1; transform-origin: 50% 50%; } 100% { -webkit-transform: translateY(100%) translateZ(0px) rotateX(-90deg); opacity: 0; transform-origin: 50% 0%; } } @keyframes reverseInNext { from { -webkit-transform: translateY(-100%) translateZ(0px) rotateX(90deg); opacity: 0; transform-origin: 50% 100%; } to { -webkit-transform: translateY(0) translateZ(0px) rotateX(0deg); opacity: 1; transform-origin: 50% 50%; } } @keyframes reverseOutPrev { 0%{ -webkit-transform: translateY(0) translateZ(0px) rotateX(0deg); opacity: 1; transform-origin: 50% 50%; } 100% { -webkit-transform: translateY(-100%) translateZ(0px) rotateX(90deg); opacity: 0; transform-origin: 50% 100%; } } @keyframes reverseInPrev { from { -webkit-transform: translateY(100%) translateZ(0px) rotateX(-90deg); opacity: 0; transform-origin: 50% 100%; } to { -webkit-transform: translateY(0) translateZ(0px) rotateX(0deg); opacity: 1; transform-origin: 50% 50%; } } #tenpay_txt { position: fixed; width: 100vw; height: 100vh; overflow: hidden; left: 0; top: 0; z-index: 999999; pointer-events: none; } #tenpay_txt .loading_box { background-color: #005ca1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .loading_case { position: fixed; background-color: #fff; border-radius: 100%; font-family: 'BrownStd-Bold'; width: .3rem; height: .3rem; right: 101%; top: 50%; transform: translate(50%, -50%) translateZ(0); animation: roundCome 2s ease 0s 1 forwards; } .loading_case .load_v_box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0); height: 50vh; width: 50vh; opacity: 0; animation: vO .1s ease 1s 1 forwards; } .loading_case .loading_text { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(0); font-size: 0; text-align: center; animation: textOur 2s cubic-bezier(0, 0.31, 0.25, 1) 3.4s 1 forwards; } .loading_case .loading_text > div { display: inline-block; vertical-align: middle; position: relative; font-size: .3rem; color: #005ca1; } .loading_case .loading_text > div:first-child { z-index: 2; } .loading_case .loading_text > div.load_text_box { animation: textCome 1s ease 2.3s 1 forwards; overflow: hidden; z-index: -1; } .loading_case .loading_text > div .shade_blaxk { position: absolute; left: 0; top: 0; opacity: 0; background-color: #fff; height: 100%; width: .23rem; z-index: 2; animation: opCome .2s ease 2.1s 1 forwards; } .loading_case .loading_text .load_wz_box { position: absolute; width: 4.33rem; height: 100%; right: 0; top: 0; overflow: hidden; animation: textComeNei 1s ease 2.4s 1 forwards; } .loading_case .loading_text .load_wz { position: absolute; right: 0; top: 0; width: 4.33rem; display: flex; justify-content: flex-end; white-space: nowrap; } .loading_case .loading_text .load_wz.load_zw { opacity: 0; position: relative; } .loading_case .sha_case { position:relative; width: 242px; left:50%; top: 50%; transform: translate(-50%, -50%) translateZ(0); text-align: center; } .loading_case .sha_case .sha_name { display: block; position: relative; overflow: hidden; width: 100%; text-align: center; margin: 0 auto; } .loading_case .sha_case .sha_zw { opacity: 0; display: none; } .loading_case .sha_case .kh_name { position: relative; left: 0; top: 0; white-space: nowrap; overflow: hidden; } .sha_name img { display: block; width: 240px; max-width: none; } .loading_case .sha_case .kh_name .sha_show { width: 200%; height: 100%; position: absolute; left: -100%; top: 0; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)70%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)70%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)70%); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)70%); /* 鏍囧噯鐨勮娉� */ animation: logoCome 4s ease-in .5s 1 forwards; } @keyframes vO { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @keyframes roundCome { 0% { top: 50%; right: 101%; } 50% { right: 50%; width: 28px; height:28px; } 100% { top: 50%; right: 50%; width: 150vw; height: 150vw; } } @keyframes opCome { 0% { opacity: 0; } 100% { opacity: 0.5; } } @keyframes textCome { 0% { margin-left: -.23rem; width: 4.56rem; } 100% { width: 2.31rem; padding-left: .23rem; margin-left: -.23rem; } } @keyframes textComeNei { 0% { width: 4.33rem; } 100% { width: 2.07rem; } } @keyframes textOur { 0% { left: 50%; transform: translate(-50%, -50%) translateZ(0); } 100% { left: 0; transform: translate(-100%, -50%) translateZ(0); } } @keyframes logoCome { from { left:-100%; transform: translate(0%, 0%) translateZ(0); } to { left:0; transform: translate(50%, 0%) translateZ(0); } } @keyframes logoShake { 0% { transform: translate(0, 0) translateZ(0); } 50% { transform: translate(-10px, 0px) translateZ(0); } 100% { transform: translate(0, 0) translateZ(0); } } @keyframes khName { 0% { height: 0; width: 0; } 40% { height: 0; width: 0; } 100% { width: 100%; height: 100%; } } @keyframes opOut { 0% { opacity: 1; right:0%; } 100% { opacity: 0; right:-100%; } }